我有一个从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'上设置监视但不会调用它。
答案 0 :(得分:2)
假设{{result.rank}}在选择新选项后显示正确的值,您可以在选择上使用ng-change来了解由于用户交互而更改模型的时间。您可能还想查看ng-model-options,它允许您设置去抖/延迟,以便在用户与控件交互时触发对模型的更改,以防他们快速改变主意并且您希望减少数量API调用。
例如:
<select ng-change="updateAPI(result)"></select>