带有复杂对象的角度选择元素

需要我正在构建的Angular应用程序中的select元素的一些帮助。带有复杂对象的角度选择元素

假设我有下面的代码，在选择元素中选择一个选项时，更改每个项目的属性'childId'的最佳方法是什么？

使用下面的代码，当我选择一个元素时，它只会设置'child'属性和选定的对象，我可以理解为什么。我唯一的问题是我还需要设置'childId'属性，那么完成该属性的正确方法是什么？

<div ng-app="CustomApp" ng-controller="CustomCtrl"> 
    <table class="table"> 
    <thead> 
     <tr> 
     <th>Description</th> 
     <th>Child</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="item in dataItems"> 
     <td> 
      <input name="Item[{{$index}}].Description" 
       value="{{item.description}}" 
       type="text" 
       class="form-control" /> 
     </td> 
     <td> 
      <select name="Item[{{$index}}].Child" 
        ng-model="item.child" 
        ng-options="ichild as ichild.description for ichild in 
           $parent.childItems track by ichild.id"> 
      <option value="">Select one option...</option> 
      </select> 
     </td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

(function() { 
    "use strict"; 
    var app = angular.module('CustomApp', []); 
    app.controller('CustomCtrl', ['$scope', 
     function($scope) { 
     $scope.dataItems = [ 
      { id: 1, description: 'foo one', childId: 1, child: { id: 1, description: 'bar01' }}, 
      { id: 2, description: 'foo two', childId: 0 }, 
      { id: 3, description: 'foo three, childId: 2, child: { id: 2, description: 'bar02' }} 
     ]; 

     $scope.childItems = [ 
      { id: 1, description: 'bar01' }, 
      { id: 2, description: 'bar02' } 
     ]; 
     }]); 
})();

来源

2015-12-16 lusocoding

我想，这是你想做的事[其实我希望]什么：

<!doctype html> 
 
<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <div ng-app="CustomApp" ng-controller="CustomCtrl"> 
 
    <table class="table"> 
 
     <thead> 
 
     <tr> 
 
      <th>Description</th> 
 
      <th>Child</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr ng-repeat="item in dataItems"> 
 
      <td> 
 
      <input name="Item[{{$index}}].description" ng-model="item.description" type="text" class="form-control" />{{item.description}} 
 
      </td> 
 
      <td> 
 
      <select name="Item[{{$index}}].child" ng-model="item.child" ng-options="ichild as ichild.description for ichild in $parent.childItems track by ichild.id"></select> 
 
      {{item.child}} 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 

 
    <script src="/Scripts/angular.js"></script> 
 
    <script> 
 
    (function() { 
 
     "use strict"; 
 
     var app = angular.module("CustomApp", []); 
 
     app.controller("CustomCtrl", ["$scope", 
 
     function($scope) { 
 
      $scope.dataItems = [{ 
 
      id: 1, 
 
      description: "foo one", 
 
      childId: 1, 
 
      child: [{ 
 
       id: 1, 
 
       description: "bar01" 
 
      }] 
 
      }, { 
 
      id: 2, 
 
      description: "foo two", 
 
      childId: 0 
 
      }, { 
 
      id: 1, 
 
      description: "foo three", 
 
      childId: 2, 
 
      child: [{ 
 
       id: 2, 
 
       description: "bar02" 
 
      }] 
 
      }]; 
 

 
      $scope.childItems = [{ 
 
      id: 1, 
 
      description: "bar01" 
 
      }, { 
 
      id: 2, 
 
      description: "bar02" 
 
      }]; 
 
     } 
 
     ]); 
 
    })(); 
 
    </script> 
 
</body> 
 

 
</html>

来源

2015-12-16 05:39:07 Maher

带有复杂对象的角度选择元素

回答

相关问题