angularjs要素が追加/削除されたときにng-repeatリストが更新されない

Question

残りの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に設定します。テンプレートのリストは変更されません。しかし、最後のログステートメントは変更を示し、例えば次のように表示されます。ユーザー配列が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のクリックや何か。

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