-1

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到输入中。但是当我点击它时，输入不会更新。我怎样才能让它更新。

4

3 回答 3

3

输入未更新，因为您没有设置/绑定其 value 属性。

更改此行

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

像这样

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

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

更新了两个修复的小提琴：http: //jsfiddle.net/waGEU/6/

于 2013-07-12T19:09:00.293 回答
2

Splice 期望一个索引而不是要删除的元素

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

改为进行绑定更新。

于 2013-07-12T18:54:11.240 回答
0

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

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

book.tags并使用它与数组保持同步$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+/) : [];
    }
);

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

您可以将所有这些放在您自己的指令中，特别是如果您计划拥有一个所有将使用此类输入实例的书籍列表。请参阅：http ://docs.angularjs.org/guide/directive#writingdirectivesshortversion

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

于 2013-07-15T13:54:21.467 回答