在列表中添加和删除元素（AngularJS）答案

【问题标题】：Adding and removing elements to/from the list (AngularJS)在列表中添加和删除元素（AngularJS）
【发布时间】：2015-09-20 12:42:06
【问题描述】：

我有两个列表：

列出已经存在的城市
我可以从中添加新城市到我的第一个列表的列表。

如果我输入名称就可以了，它会在第一个列表中创建新项目。我想要丰富的是通过单击第二个列表中的元素将城市添加到第一个列表中（首先检查一个城市，然后通过按下按钮确认操作）。 A试图通过jQuery获取被点击元素的名称并将其放入输入中，以便能够在下一步中确认添加。

$(document).on('click', '.city', function () {
    var input = $('.city-input'),
        inputValue = input.val();
    input.val($(this).text());
    return false;
});

它接受名字，并将这个名字放入输入中。但是当我按下按钮时 - 它只会创建空元素......

如果我输入了一些东西，然后按下按钮 - 它会创建一个元素。然后，如果我按下第二个列表中的任何城市 - 它会出现在输入字段中，但在我按下确认按钮后，它会使用先前输入的文本创建元素...

另外，我尝试创建指令，但这仍然不起作用..

addCityApp.directive('searchList', function() {
    return {
        scope: {
            searchModel: '=model'
        },
        link: function(scope, element, attrs) {
            element.on('click', attrs.searchList, function(){
                scope.searchModel = $(this).text();
                scope.$apply();
            });
        }
    };
});

这是我的DEMO

【问题讨论】：

请尽量避免混合使用 JQuery 和 Angular。而不是使用 JQuery，只需将该逻辑移动到一个角度 ng-click="myFunction" 并在您的控制器中定义 myFunction = function () {...}。

标签： angularjs input angularjs-ng-repeat angular-ngmodel

【解决方案1】：

我已经使用纯角度修改了您的代码，代码如下：http://jsfiddle.net/yxtwhos6/25/

$scope.setCity = function(city) { $scope.newItemName = city;};

我尝试尽可能地更改您的代码。

【讨论】：

【解决方案2】：

我只会使用 angular 并设置模型，这是我的示例：http://jsfiddle.net/yxtwhos6/16/

$scope.ultiCTRL = { selectedCity: '' };

【讨论】：

感谢您的帮助，先生。你的答案绝对是好的！但我选择了少昊的答案。