Question

我的范围内有一个数组，我在html模板中使用输入迭代每个元素：

控制器：

    app.controller("otherArticleCtrl", ["$scope", "$http", function($scope, $http) {

        $scope.articles = [{ url: 'index.php', title: "First"}, { url: 'index.php', title: "Second"}];
    }]);

模板：

<div ng-repeat="(key, article) in articles track by $index">
  <h1>{{ article.title }}</h1>
  <input type="text" ng-model="article.url"/>
</div>

当用户修改输入中的url，进行AJAX get调用并更新文章标题时，我需要。

我已经在数组中循环了一个监视功能：

for(var i=0; i < $scope.articles.length; i++) {
    $scope.$watch('articles['+i+'].url', function(new, old){
       if(new != old){
           $http({
               method: 'GET',
               url: new
           }).then(function successCallback(response) {
               $scope.articles[i].title = response.title;
           });
       }
    }, true);
}

但$ scope.articles [i]未定义，我不知道如何获取更改的模型或元素的引用。

有什么想法吗？谢谢你的帮助。

Answer 1

不应在任何循环中使用$watch。在这种情况下，您可以使用ng-change代替$watch。并在index number函数中发送ng-change。比如ng-change="changeUrl($index)"。和功能如下所示。

可以尝试：

在html中：

<div ng-repeat="(key, article) in articles track by $index">
  <h1>{{ article.title }}</h1>
  <input type="text" ng-model="article.url" ng-change="changeUrl($index)"/>
</div>{{index}}

在控制器中：

$scope.articles = [{ url: 'index.php', title: "First"}, { url: 'index.php', title: "Second"}];

  $scope.changeUrl =  function(index){
  $http({
            method: 'GET',
            url: $scope.articles[index].url
        }).then(function successCallback(response) {
            $scope.articles[index].title = response.title;
        });
  };

您可以使用$http.get

$http.get($scope.articles[index].url)
    .then(function(response) {
        $scope.articles[index].title = response.title;
    });

Answer 2

我建议改用ngChange。

您可以这样做：

<input type="text" ng-model="article.url" ng-change="somethingChanged()"/>

在控制器中添加功能。如果您需要知道更改元素的索引，可以使用ng-repeat中的$ index来了解更改数据的位置：

    <input type="text" ng-model="article.url" ng-change="somethingChanged($index)"/>

$scope.somethingChanged = function(index) {
   $scope.articles[index];   <--------- Here is the element that changed
}

快乐的编码！

在自我更新时更新ng-repeat中的模型

2 个答案: