无序列表插入数据后不刷新

Question

我有以下代码在 unordered list 中显示来自 mongolab 的员工列表。使用 ng-repeat 可以正确列出员工。现在我引入了一个按钮来添加新员工。它正在插入员工记录——但不刷新 UI 中的列表。我想这是因为我没有使用 ng-model。我的问题是：-

即使我没有定义模型，它如何显示员工列表。 ng-repeat 是否隐式创建模型？
在此处添加模型以使双向数据绑定起作用的正确方法是什么？

代码

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

Answer 1

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

无序列表插入数据后不刷新

Unordered list not refreshed after inserting data

angularjs

angularjs-ng-repeat

angular-ngmodel