ng-select下拉ajax /对象映射

Question

使用角度ng-select，寻找最佳实践/建议，以将选择下拉列表与基于范围内对象的属性选择的所选选项链接起来。

控制器持有（动物）具有选定猫的对象
使用任何“承诺”类型的角度服务（演示中为$ http）从Ajax调用中加载猫（选项）
当页面加载时，我希望所选的cat与animal.cat相同（希望看到双向映射的最简单路径）

这是the人： http ://plnkr.co/edit/bMj7678djgPoJbiTRceG?p=preview

服务/控制器JS。

selectDemo = angular.module('selectDemo',[]);

selectDemo.factory("cat", ["$http", "$log", function($http, $log){
  return {
    query: function(runAfter){
      $log.debug("Getting cats from service");
      return $http.get('getCats.json');
    }
  }
}]);

selectDemo.controller('SelectDemoCtrl', ["$scope", "$log", "cat", function($scope, $log, Cat){
  $scope.animal = {type: "Mammal", cat: {"id": 2, "name": "Simon", "breed": "Persian"}};

  Cat.query().then(function(data){
    cats = data.data;
    $scope.cats = cats;
  });
}]);

HTML：

<!DOCTYPE html>
<html>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body ng-app="selectDemo" ng-controller="SelectDemoCtrl">
    <h1>AngularJS Select Dropdown</h1>
    <div id="data"></div>
    <form role="form">
       <select data-ng-model="animal.cat" data-ng-options="cat.name for cat in cats">
          <option value="">Select a cat</option>
       </select>
    </form>
    <p>You selected: {{ animal.cat }}</p>
  </body>

</html>

JSON响应对象：

[{"id": 1, "name": "Garfield", "breed": "Tabby"},
{"id": 2, "name": "Simon", "breed": "Persian"},
{"id": 3, "name": "Twix", "breed": "Mixed"}]

Answer 1

这是更新的插件：

http://plnkr.co/edit/KTJt9602eD5Pgr1y7c9w?p=preview

这里的问题是，从ng-options选择的对象需要被引用等于 ng-model引用的对象，因此需要在数组中查找对象。

ng-select下拉ajax /对象映射

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-06-03 21:02:10

ng-select下拉ajax /对象映射

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-06-03 21:02:10

解决方案1
1 已采纳 2014-06-03 21:02:10