Ungeordnete Liste nicht nach dem Einfügen von Daten aktualisiert

Ich habe folgenden Code zur Anzeige der Mitarbeiter Liste von Mongolab, in einem unordered list. Mit ng-repeat werden Mitarbeiter korrekt aufgelistet. Jetzt habe ich einen Button eingeführt, um neue Mitarbeiter hinzuzufügen. Es fügt Mitarbeiterdatensätze ein, aktualisiert die Liste jedoch nicht in der Benutzeroberfläche. Ich nehme an, es liegt daran, dass ich kein ng-Modell verwende. Meine Fragen sind: -Ungeordnete Liste nicht nach dem Einfügen von Daten aktualisiert

Wie zeigt es Mitarbeiterliste anzeigen, obwohl ich kein Modell definiert habe. Ist ng-repeat das Erstellen eines Modells implizit?
Was ist der richtige Ansatz, um hier ein Modell hinzuzufügen, so dass die bidirektionale Datenbindung funktioniert?

CODE

<html> 
<head> 

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-resource.js"></script> 

<script type="text/javascript"> 

//defining module 
var app = angular.module('myApp', ['ngResource']);  

//defining factory 
app.factory('employees', function ($resource) { 

    return $resource('https://api.mlab.com/api/1/databases/humanresource/collections/Employees', 
        {apiKey: 'removedmykey'} 
       ); 
}); 



//defining controller 
app.controller('myController', function ($scope, employees) 
{ 
    $scope.empList = employees.query(); 

    $scope.AddUser = function() 
      { 
       alert("called"); 
       var d = new Date(); 
       var nameVal = "Emp-"+d.toString(); 

       var newEmployee =  { 
          name: nameVal 

          } 
       employees.save(newEmployee);     
       return true; 
      }; 

}); 

</script> 


</head> 

<body ng-app="myApp"> 

    <div ng-controller="myController"> 
    <ul> 

     <li ng-repeat = "objEmployee in empList" ng-class-even="'light-gray'" ng-class-odd = "'dark-gray'" > 
      {{objEmployee.name}} 

     </li> 

    </ul> 
    <input type="submit" value= "AddUser" ng-click="AddUser()" /> 
    </div> 

</body> 
</html>

Quelle

2016-06-05 Lijo

ng-repeat braucht keine Zwei-Wege-Bindung: Es ist nicht alles aus der Sicht auf das Modell speichern muss. Für Eingabefelder wird beispielsweise eine zweiseitige Bindung benötigt: Das Eingabefeld muss den Wert im Modell anzeigen, und das Eingeben von etwas in das Feld muss das Modell aktualisieren.

Ihr Code nicht die zusätzlichen Mitarbeiter nicht angezeigt, nur weil Sie nicht die neuen Mitarbeiter in das Array von Mitarbeitern von der Ansicht angezeigt hinzugefügt haben:

$scope.AddUser = function() { 
    ... 
    // create a new employee 
    var newEmployee = ... 

    // send it to the server 
    employees.save(newEmployee); 

    // add it to the array of displayed employees 
    $scope.empList.push(newEmployee); 
};

Quelle

2016-06-05 17:36:28

Ungeordnete Liste nicht nach dem Einfügen von Daten aktualisiert

Antwort

Verwandte Themen