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

尝试在单击元素时从列表中添加或删除元素，但似乎没有删除正确的元素，尽管最初添加这些元素似乎有效

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>

{{book.tags}

{{tag}}

---

可以单击标记以添加或删除标记。我将

ng model

添加到输入中。但当我单击它时，输入将不会更新。如何使其更新。

Splice希望删除的是索引而不是元素

JS

改变

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

到

关于未更新输入的绑定的其他问题：

然后将输入绑定到books.displayTag

我认为这里的问题可能与您在AS3绑定中遇到的问题类似，当更改数组中的底层元素时，它不会被视为对数组本身的更改。也许这是不同的，如果是这样的话，我想进一步澄清

我上面的代码“有效”，但绝对没有效率，因为我基本上每次都在克隆阵列，请参见使用以下代码的答案：

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

---

改为进行绑定更新。

由于未设置/绑定其值属性，因此输入未更新

换行

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

像这样的事情

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

还要检查shaunhusain的答案，以修复您的拼接错误

---

更新了这两个补丁：

对于双向绑定解决方案，您可以引入一个额外的变量

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

以下是更新的JSFIDLE：

您可以将所有这些放在您自己的指令中，特别是如果您计划有一个全部使用此类输入实例的书籍列表。 见：

---

但是，像这样更新输入字段值有时会导致carret位置切换到末尾（例如，在删除标记时）。

@a首先，您使用的是错误的拼接。ng list是什么？为什么要将输入元素绑定到数组？？？@T.J.Crowder我很抱歉。下次我会做得很好。我想OP的问题是关于不更新输入的。它应该显示$scope.book.tags中当前选定标记的列表。编辑：在第二次阅读时，似乎是两个问题合一。这个答案与他在点击tags@AntonStrogonoff老实说，问题是它的标题和这篇文章“可以单击标签添加或删除标签。我将ng模型添加到输入中。但当我单击它时，输入将不会更新。剩下的是我根据JSFIDLE假设的，JSFIDLE是唯一提供的东西。@shaunhusain:不过，包含了多少文本”但是当我点击它时，输入不会更新。我怎样才能让它更新。”所以它很清楚（好吧，好吧，有点清楚）这是他/她想要更新的

输入。

是的，老实说，我没有看到代码，我跳到小提琴前，看到了我看到的问题，然后又回来了：）@AntonStrogonoff是正确的，根据ng列表和ng模型上的AngularJS文档，第一种方法也应该有效。不过，我非常确定ng列表是从文本表示转换而来的你是对的，我误读了文档。（更详细，但修复了JavaScript的一些问题，并保留了ng模型）。是的，这肯定比每次克隆数组要好，这是“接受”吗“处理观察数组变化的方法是，让它计算一些具有不同值的表达式？但我现在无法键入内容来更新book.tags。我不是说单击类型是添加标记的唯一方法。还应支持类型。

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

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

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

$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+/) : [];
    }
);