帶有複雜對象的角度選擇元素

需要我正在構建的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

帶有複雜對象的角度選擇元素

回答

相關問題