Question

有一个从rest api中检索到的用户列表。这是模板

<div ng:controller="UserController">
    <a ng-click="createUser()">Create User</a>

    <div ng-view>
        <ul>
            <li ng-repeat="user in users">
                 {[{user.first_name}]} {[{user.last_name}]} 
            </li>
        </ul>
    </div>
 </div>

JS：

function UserController($scope, User, Group){
    $scope.users = User.query();

    $scope.createUser = function(){

        //$scope.users = null;
        //$scope.users.pop();
        //$scope.users.push(new User({id:'5'}));

        console.log($scope.users);
    }
}

服务：http://dpaste.com/1065440/

正确检索并列出所有用户。问题是我根本无法操纵渲染列表。无论我做什么推，弹出或设置为null。列表在模板中不会更改。但是，最后一条日志语句会显示更改，例如当users数组设置为null时为NULL。

问题出在哪里？

Answer 1

您推入数组的对象应该是User

的实例

function UserController($scope, User){

    $scope.users = User.query();

    $scope.createUser = function(){
        $scope.users.push(new User({first_name:'Bob', last_name: 'Schmitt'}));
    }   
}

因此，请使用new User({})

从我们的谈话中，似乎问题出在路由中。将相同的外部控制器分配给ng-view中加载的部分。删除ng:controller="UserController"并将createUser按钮移动到部分可以解决问题，但如果确实需要从createUser之外调用ng-view方法，那么所有与之相关的数据需要在外部控制器中。因此，您可以保持外部控制器不变，并更改路由以使用空的占位符控制器。

Answer 2

确保调用createUser。 IE ng-click等等。

<button type="button" ng-click="createUser()">Create User</button>

你的推送功能看起来是正确的，但你在html中的绑定看起来是错误的。它应该是双花括号。

<li ng-repeat="user in users">
    {{user.first_name}} {{user.last_name}}
</li>

添加了以前用于添加对象的示例。

<div ng-app="main">
    <div ng-controller="MyCtrl">
        <button ng-click="add()" >Add</button>
        <div id="container">
            <div ng-repeat="test in tests>{{test.name}}</div>
        </div>
    </div>
</div>


$scope.tests = {};

$scope.add = function() {
   var newTest = {name: 'Test Message'};

   $scope.tests.push(newTest);
};

添加/删除元素时未更新angularjs ng-repeat列表

2 个答案: