Элемент с угловым элементом со сложным объектом

Нужна помощь с помощью элемента select в приложении Angular, которое я создаю.Элемент с угловым элементом со сложным объектом

Предположим, у меня есть код ниже, как лучше всего изменить свойство «childId» каждого элемента при выборе опции в элементе select?

В приведенном ниже коде, когда я выбираю элемент, он будет устанавливать свойство «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

Элемент с угловым элементом со сложным объектом

ответ

Смежные вопросы