为什么输入不会在更改模型时更新？

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/