Обновление модели в нг-повтора, когда само обновляемый

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 получить вызов, и обновить заголовок статьи.

Я сделал функцию часов Перебор массива:

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 [я] не определен, и я не знаю, как получить ссылку модели или элемента, изменяется.

Любые идеи? Спасибо за помощь.

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()"/> 

И добавить функцию внутри контроллера. Если вам нужно узнать индекс элемента, который изменил вы можете использовать $ индекса от нг-повтора, чтобы знать, где данные, которые изменились:

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

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

Счастливого кодирование!