如何在使用ng-repeat的ng-model时调用该值? Angular JS

时间:2017-07-28 11:06:27

标签: angularjs

如果我使用ng-repeat,我有一个ng-model没有在控制器中调用的问题。正如你在下面看到的那样,在体育部分,当在控制器中提交表单时,我得到运动值未定义但是为了满足需求,我得到了我输入到该字段的任何内容,这意味着它获得了价值。 我尝试通过id识别,但它不起作用。

<form ng-submit="sendDetails(sports, demands)" ng-class="form-horizontal" enctype="multipart/form-data">
<div class="row">
    <div class="form-group col-md-6">
        <label class="control-label col-sm-2">Sports:</label>
        <input class="form-control" ng-model="sports" ng-repeat="sports in selectedSports" type="text" disabled/>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <input class="form-control" ng-model="demands" type="text"/>
    </div>
    <div class="col-md-6">
        <button class="btn btn-default" type="submit">Submit</button>
    </div>
</div>
</form>

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 }
        });
    }
}

控制器

$scope.sportsValues =[];
$scope.sendDetails = function($sports, $demands){
    if($demands.length > 0 ){
        var sendDetailsPromise = sportsFactory.sendDetails($sports, $demands);
        sendDetailsPromise.success(function (data){
            $sportsValues = data;
};

2 个答案:

答案 0 :(得分:1)

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

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

虽然我确信你已经意识到通过被禁用,输入实际上永远不会从你给它的模型中改变(假设它不是空的)。

答案 1 :(得分:0)

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

angular.module("app",[])
.controller("ctrl", function($scope) {
  $scope.itemList = [
    {name: 'apple', value: 11},
    {name: 'orange', value: 22},
    {name: 'peach', value: 33},
  ];
})
<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app" ng-controller="ctrl">
    <h3>ng-repeat DEMO</h3>
    <div ng-repeat="item in itemList">
       {{item.name}} <input ng-model="item.value" />
    </div>
    <hr>
    {{itemList | json}}
  </body>