关于angularjs:如何在使用ng-repeat的ng-model时调用该值?

How to call the value when ng-model with ng-repeat is used? Angular JS

本问题已经有最佳答案,请猛点这里访问。

我有一个问题,如果我使用ng repeat,ng模型不能在控制器中调用。正如您在下面看到的,在运动部分,当表单在控制器中提交时,我会得到未定义的运动值,但是为了满足需求,我会得到输入到字段中的任何内容,这意味着它会得到值。我试着用身份证来确认身份,但不太管用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form ng-submit="sendDetails(sports, demands)" ng-class="form-horizontal" enctype="multipart/form-data">

   
        <label class="control-label col-sm-2">Sports:</label>
        <input class="form-control" ng-model="sports" ng-repeat="sports in selectedSports" type="text" disabled/>
   


   
        <input class="form-control" ng-model="demands" type="text"/>
   
   
        <button class="btn btn-default" type="submit">Submit</button>
   

</form>
1
2
3
4
5
6
7
8
9
10
11
angular.factory('sportsFactory', function($http) {
return {
    postAdministrationEntries: function ($sports, $demands){
        var fd = new FormData();
        fd.append('sports', $sports);
        fd.append('demands', $demands);
        return $http.post('/sendDetails', fd,{
        headers: { 'Content-Type': undefined }
        });
    }
}

控制器

1
2
3
4
5
6
7
$scope.sportsValues =[];
$scope.sendDetails = function($sports, $demands){
    if($demands.length > 0 ){
        var sendDetailsPromise = sportsFactory.sendDetails($sports, $demands);
        sendDetailsPromise.success(function (data){
            $sportsValues = data;
};


这可能是因为每次通过您的每个循环都分配相同的模型。您需要结合使用循环的$index和模型:

1
2
3
4
<input class="form-control"
  ng-model="sports[$index]"
  ng-repeat="sports in selectedAttributes track by $index"
  type="text" disabled />

尽管我确信您认识到,通过被禁用,输入永远不会实际从您提供的模型中更改(假设它不是空的)。


处理对象数组的最常见方法是让ng-model使用每个对象的属性:

1
2
3
4
5
6
7
8
angular.module("app",[])
.controller("ctrl", function($scope) {
  $scope.itemList = [
    {name: 'apple', value: 11},
    {name: 'orange', value: 22},
    {name: 'peach', value: 33},
  ];
})
1
2
3
4
5
6
7
8
9
<script src="//unpkg.com/angular/angular.js">
  <body ng-app="app" ng-controller="ctrl">
    ng-repeat DEMO
   
       {{item.name}} <input ng-model="item.value" />
   
   
    {{itemList | json}}
  </body>