添加和删​​除元素 to/from 列表 (AngularJS)

Question

我有两个列表：

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

如果我输入名称就可以了，它正在第一个列表中创建新项目。我想要丰富的是通过单击第二个列表中的元素将城市添加到第一个列表中（首先检查一个城市，然后通过按下按钮确认操作）。 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

Answer 1

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

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

Answer 2

我已经使用纯 angular 修改了您的代码，这里是代码：http://jsfiddle.net/yxtwhos6/25/

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

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