从ng-repeat添加每个对象的属性

时间:2015-04-15 22:33:41

标签: javascript angularjs

我有一个从api获取并在页面上显示的对象数组。

现在我想为每个对象的选择下拉列表,这些对象的值最初是未定义的,但是设置为用户设置的任何值。在此用户事件上,对象应反映此更改,并且还应向api发送更新请求以进行此新更改。这是我到目前为止所尝试的内容。

   <section class='results'>
    <p class='no-results' ng-show='!results.length && !loading'>No Results</p>

    <article class='result' ng-repeat='result in results track by $id(result)'>
      <h2><a href="{{result.docno}}">{{result.docno}}</a></h2>
      <select ng-options="grade for grade in [0,1,2]" ng-model="result.rank"></select>
      {{result.rank}}
      <!--<p></p>-->
    </article>
   </section>

这里的结果是数组和rank是我想要添加到结果中的每个结果对象的新属性。每次更改排名时更新结果对象的正确方法是什么?

以下是控制器中填充结果数组

的代码片段
$scope.loadResults = function(m) {
    results.search($scope.query, m, $scope.offset).then(function(a) {

        //Load results
        var i = 0;
        for(;i < a.hits.length; i++){
            var temp = a.hits[i];
            //temp['grade'] = undefined;
            $scope.results.push(temp);
        }

        ...
    });
};

我还尝试在'result.rank'上设置监视但不会调用它。

1 个答案:

答案 0 :(得分:2)

假设{{result.rank}}在选择新选项后显示正确的值,您可以在选择上使用ng-change来了解由于用户交互而更改模型的时间。您可能还想查看ng-model-options,它允许您设置去抖/延迟,以便在用户与控件交互时触发对模型的更改,以防他们快速改变主意并且您希望减少数量API调用。

例如:

<select ng-change="updateAPI(result)"></select>