6

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 が出力されます。

問題がどこにあるのでしょうか?

4

2 に答える 2

5

配列にプッシュするオブジェクトは、のインスタンスである必要があります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呼び出す必要がある場合は、それに関連するすべてのデータを外部コントローラーに配置する必要があります。したがって、外側のコントローラーをそのままにして、空のプレースホルダー コントローラーを使用するようにルートを変更できます。createUserng-view

于 2013-04-19T21:55:43.457 に答える
3

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);
};
于 2013-04-19T21:55:37.053 に答える