Question

我试图学习Angular。以下是我试图做的事情：

我正在构建一个向我展示城市的应用程序。当我点击一个城市时，我想查看所有我最喜欢的城市的列表。

使用带有ng-click功能的“Show-List”按钮，但需要按下按钮。

以下是我自动完成此操作的方法：

我希望我的DOM中的列表会在更改列表时自动更新。

$scope.$watch('updatedList', function() {

        // CHECK IF WORKS
        console.log($scope.updatedList);

        // APPLY TO DOM
        $timeout(function(){

            $scope.$apply(function () {
                $scope.watchList = $scope.updatedList;
            });

        }, 1000)
    });

控制台显示没有错误，并给出了correc值：

对象{city.3：“Herat”，city.7：“Haag”，city.10：“Tilburg”......}

在我的div中有如下内容：

<ul>
                <li ng-repeat="y in updatedList">{{ y }}</li>
            </ul>
            <ul>
                <li ng-repeat="a in watchList">{{ a }}</li>
            </ul>

首先是NG-Click-Version（适用于点击），第二个是$ scope。$ watch

很抱歉很多问题，但我真的很难与Angular-Docs争吵。

编辑：

将城市添加到列表中的功能：

$scope.addToList = function(name,id) {

        var cityToAdd = name;
        var cityToAddID = id;

        // ADD A CITY TO THE COOKIE -> WORKS
        $cookies.put('city.' + cityToAddID, cityToAdd);
        $scope.newList = $cookies.getAll();
        $scope.addToListMessage = cityToAdd + " wurde hinzugefügt";

        // Show short INFONOTICE
        window.setTimeout(function() {
            $scope.$apply(function() {
                $scope.addToListMessage = "";

            });
        }, 1000);
            // Update the List
            $scope.updateList();

    };

第二功能 - ＆gt;从Cookies获取值并将它们放入数组：

$scope.updateList = function() {

        var allCitys = $cookies.getAll();


        // PUT ALL INTO AN ARRAY -> WORKS
        var favouritesFromCookie = [];
        $.each(allCitys, function(index, value) {

            if (index.indexOf('city.') == 0) { favouritesFromCookie.push(value) }
        });

        // PUT THE ARRAY OF CITYS INTO A SCOPE_VARIABLE

            $scope.updatedList = favouritesFromCookie;



    };

Answer 1

你的$ scope.updatedList需要是一个在ng-repeat中使用的数组。

Answer 2

你不应该直接在表达式中写一个列表。试试这个

<ul>
    <li ng-repeat="y in watchList">{{ y.city }}</li>
    <li ng-repeat="y in watchList">{{ y.yourListItem}}</li>
</ul>

$ scope.apply无法在Angular

2 个答案: