angularjs lista powtórzeń nie została zaktualizowana po dodaniu/usunięciu elementu

Question

Istnieje lista użytkowników pobranych z interfejsu api. Oto szablon

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

Usługa: http://dpaste.com/1065440/

wszystkim użytkownikom pobrać i wymienione poprawnie. Problem polega na tym, że w ogóle nie mogę manipulować wyrenderowaną listą. Bez względu na to, co robię, naciskaj, pop lub ustaw na wartość null. Lista nie zmienia się w szablonie. Jednak ostatnie oświadczenie dziennika pokazuje zmiany, drukuje np. NULL, gdy tablica users ma wartość null.

Wszelkie pomysły na problem?

Answer 1

Przedmiotem pchasz do tablicy powinien być instancją User

function UserController($scope, User){ 

    $scope.users = User.query(); 

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

, użyj new User({})

Z naszej rozmowy, wydaje się, że problem był w routingu. Ten sam zewnętrzny kontroler został przypisany do części, która była ładowana do ng-view. Usunięcie ng:controller="UserController" i przeniesienie przycisku createUser do częściowego rozwiąże problem, ale jeśli naprawdę istnieje potrzeba wywołania metody createUser spoza ng-view, wszystkie dane z nią związane muszą znajdować się w zewnętrznym kontrolerze. Możesz więc zachować swój zewnętrzny kontroler bez zmian i zmienić trasę, aby użyć pustego kontrolera zastępczego.

Answer 2

upewnij się, że wywoływany jest createUser. IE ng-click lub coś podobnego.

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

Twoja funkcja push wygląda poprawnie, ale twoje powiązanie w html wygląda nieprawidłowo. Powinny to być podwójne nawiasy klamrowe.

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

Dodano przykład Użyłem poprzednio do dodawania obiektu.

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