Question

我在Angular中有一个小问题，我有一个表，其中的行绑定到控制器内的数组，如下所示：

<div ng-controller="MyCtrl">

    <input type="button" value="Pop" ng-click="popone()" />
    <input type="button" value="Push" ng-click="pushone()" />

    <table>
        <tr ng-repeat="n in myLiveArray">
            <td>{{n.a}}</td>
            <td>{{n.b}}</td>
        </tr>
    </table>
</div>

这是控制器：

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    var myArray = [];

    var a = {a:2,b:0};
    var b = {a:3,b:2};
    var c = {a:4,b:2};
    var d = {a:5,b:3};
    var e = {a:6,b:4};

    myArray.push(a);
    myArray.push(b);
    myArray.push(c);
    myArray.push(d);
    myArray.push(e);

    $scope.myArray = myArray;

    var myLiveArray = [];
    $scope.myLiveArray = myLiveArray;

    for(var i = 0; i < myArray.length; i++){
        $scope.myLiveArray.push($scope.myArray[i]);
    }

    $scope.popone = function(){
        $scope.myLiveArray.pop();
        $scope.count--;
    }

    $scope.pushone = function(){
        $scope.myLiveArray.push($scope.myArray[$scope.count]);
        $scope.count++;
    }
}

JSFiddle是here。

问题是，当从数组中弹出对象时，绑定按预期工作并更新DOM，但是当您尝试将同一个对象推回到阵列上时，这不起作用。

如果我直接绑定到一个值类型数组，我可以随意推送和弹出，并且表格会更新两种方式，但在这种情况下我只能弹出。

有人能说清楚为什么会这样吗？我仍然非常擅长Angular，欢呼。

Answer 1

你的代码确实有效，只是你没有向数组推送具有预期值的任何东西，因为count是未定义的，因此数组中充满了“未定义”。如果你按，然后点击弹出，你会发现似乎没有任何事情发生，实际上，它正在弹出一个未定义的。如果您在弹出和推送功能中添加一些警报，您可以看到这种情况发生。

将此添加到pushone：

alert($scope.count+" "+$scope.myArray[$scope.count]);

返回：每次点击推送都未定义未定义。

当你真正推送它时，它按预期工作。

初始化计数，并确保它保持在界限内，你应该很好。

Answer 2

控制台日志是你的朋友：）

这是你添加了一些日志的jsfiddle： http://jsfiddle.net/HB7LU/3515/

    console.log($scope.count);
    console.log($scope.myArray);
    console.log($scope.myLiveArray);

打开控制台，然后点击推送。你可以看到你的柜台是NaN。我认为这是因为它没有初始化。您可以先将其初始化为4并从那里继续，考虑边缘情况。

Answer 3

尝试在控制器定义的最后设置$ scope.count = $ scope.myLiveArray.length。

  $scope.pushone = function(){
        $scope.myLiveArray.push($scope.myArray[$scope.count]);

    }

   $scope.count = $scope.myLiveArray.length;

现在无需手动设置它（我从pushone方法中删除它）。 Angular应该自动为您更新

Answer 4

你不应该递增和递减$scope.count。

这是更好的方法：

$scope.myLiveArray.push($scope.myArray[$scope.myLiveArray.length]);

http://jsfiddle.net/sW8G7/1/

ng-repeat - 弹出后，你无法推动

4 个答案: