2016-06-05 1 views
0

У меня есть следующий код для отображения списка сотрудников от mongolab, внутри unordered list. Используя ng-repeat, он правильно перечисляет сотрудников. Теперь я добавил кнопку для добавления новых сотрудников. Он вставляет записи emploees - но не обновляет список в пользовательском интерфейсе. Я думаю, это потому, что я не использую ng-model. Мои вопросы: -Неупорядоченный список не обновляется после вставки данных

  1. Как это показать список сотрудников, даже если я не определил модель. Является ли ng-repeat созданием модели неявно?
  2. Каков правильный подход для добавления модели здесь, чтобы двусторонняя привязка данных работала?

КОД

<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> 

ответ

3

ng-repeat не нужно двухсторонние связывания: ему не нужно, чтобы сохранить что-либо с точки зрения на модель. Для полей ввода требуется двухсторонняя привязка, например: поле ввода должно отображать значение в модели, а ввод текста в поле должен обновлять модель.

Ваш код не отображается добавленный сотрудника просто потому, что вы не добавили нового сотрудника к массиву работников, указываемой в целях:

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