ng-repeat-弹出后，您将无法按

Question

I have a small issue in Angular where I have a table, the rows of which are bound to an array inside of a controller, like so:

<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>

And here is the controller:

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++;
    }
}

A JSFiddle is here .

The issue is that when objects are popped off the array, the binding works as expected and the DOM is updated, but when you try to push the same object back onto the array then this doesn't work.

If I bind directly to an array of value types, I can push and pop as I please and the table updates both ways, but in this scenario I can only pop.

Can anybody shed some light on why this is? I'm still very new at Angular, cheers.

Answer 1

Your code does work, it's just that you're not pushing anything with an expected value to the array because count is undefined, so the array is full of "undefined"s. If you push and then click pop, you'll notice nothing seems to happen, when actually, it's popping off one of the undefineds. If you add some alerts in the pop and push functions you can see this happening.

add this to pushone:

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

returns: undefined undefined on every click push.

When you actually push something there it works as expected.

initialize count, and make sure it stays within bounds and you should be good.

Answer 2

Console log is your friend :)

This is your jsfiddle with some logs added: http://jsfiddle.net/HB7LU/3515/

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

open up your console and click push. You can see that your counter is NaN. I think it's because it's not initialized. You can start by initializing it to 4 and continue from there, think about the edge cases.

Answer 3

Try setting $scope.count = $scope.myLiveArray.length at the very end of your controller definition.

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

    }

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

No need to manually set it anywhere now (I removed it from the pushone method). Angular should automatically update it for you

Answer 4

You shouldn't increment and decrement $scope.count .

This is the better approach:

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

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