爲什麼輸入不會在更改模型時更新？

Question

http://jsfiddle.net/waGEU/1/

試圖添加或從列表中刪除元素，當它們被點擊時，但似乎沒有刪除正確的元素，儘管最初添加它們似乎工作。

JavaScript的

angular.module('app', []) 
    .controller('MainCtrl', function($scope) { 
     $scope.tags = ['a', 'b', 'c'] 
     $scope.book = {tags: []} 
     $scope.toggle_tag = function(tag) { 
      index = $scope.book.tags.indexOf(tag) 
      if (index == -1) 
       $scope.book.tags.push(tag) 
      else 
       $scope.book.tags.splice(tag, 1) 
     } 
    }); 

的HTML

<div ng-app="app" ng-controller="MainCtrl"> 
    <input type="text" ng-model="book.tags" ng-list="/ /" /> 
    <p>{{book.tags}}</p> 
    <span class="tag" ng-repeat="tag in tags" ng-click="toggle_tag(tag)">{{tag}}</span> 
</div> 

的標籤可以點擊添加或刪除標籤。我將ng-model添加到輸入。但是當我點擊它時，輸入不會更新。我怎樣才能讓它更新。

Answer 1

對於雙向綁定解決方案，您可以引入一個額外的變量

<input type="text" ng-model="book.tagInputValue" /> 

，並使用$scope.$watch

$scope.$watch('book.tags', 
    function(newValue, oldValue, scope) { 
     scope.book.tagInputValue = newValue.join(' '); 
    }, 
    true 
); 

$scope.$watch('book.tagInputValue', 
    function(newValue, oldValue, scope) { 
     scope.book.tags = (newValue && newValue.length > 0) ? 
      newValue.split(/\s+/) : []; 
    } 
); 

的 book.tags陣列保持同步

這是更新的jsFiddle：http://jsfiddle.net/waGEU/9/

您可以將所有內容放在您自己的指令中，特別是如果您計劃擁有一個將按實例方式使用此類輸入的書籍列表。 請參閱：http://docs.angularjs.org/guide/directive#writingdirectivesshortversion

但是，更新輸入字段的值可能會導致有時（例如刪除標記時）切換到結束位置。

Answer 2

剪接期望的索引不是元素以除去

http://jsfiddle.net/waGEU/2/

JS

angular.module('app', []) 
    .controller('MainCtrl', function($scope) { 
     $scope.tags = ['a', 'b', 'c'] 
     $scope.book = {tags: []} 
     $scope.toggle_tag = function(tag) { 
      index = $scope.book.tags.indexOf(tag) 
      if (index == -1) 
       $scope.book.tags.push(tag) 
      else 
       $scope.book.tags.splice(index, 1) 
     } 
    }); 

改變

   $scope.book.tags.splice(tag, 1) 

到

   $scope.book.tags.splice(index, 1) 

關於約束力不更新輸入的其他問題：

http://jsfiddle.net/waGEU/5/

angular.module('app', []) 
    .controller('MainCtrl', function($scope) { 
     $scope.tags = ['a', 'b', 'c']; 
     $scope.book = {tags: [], displayTag:""}; 
     $scope.toggle_tag = function(tag) { 
      index = $scope.book.tags.indexOf(tag) 
      if (index == -1) 
       $scope.book.tags.push(tag) 
      else 
       $scope.book.tags.splice(tag, 1) 
      $scope.book.displayTag = $scope.book.tags.slice(0); 
     } 
    }); 

然後輸入綁定到books.displayTag

我覺得這裏的問題可能是類似的東西你會遇到AS3綁定，當改變數組中的底層元素時，它不會被視爲對數組本身的改變。也許這是不同的，如果我想進一步澄清。

我上面的代碼「作品」，但絕對不是有效的，因爲我每次基本上克隆陣列，查看使用了答案：

<input type="text" value="{{book.tags.join(',')}}" /> 

使綁定更新代替。

Answer 3

輸入未更新，因爲您未設置/綁定其值屬性。

改變這一行

<input type="text" ng-model="book.tags" ng-list="/ /" /> 

到這樣的事情

<input type="text" value="{{book.tags.join(',')}}" /> 

還要檢查shaunhusain的答案來解決你的拼接錯誤。

與兩個補丁更新小提琴：http://jsfiddle.net/waGEU/6/