Angular 1.5不更新ng-repeat

时间:2016-03-15 17:59:42

标签: javascript angularjs

我通过ng-repeat显示表格

     <div ng-app="spApp">
<div ng-controller="spListCtrl as MyList">
<table width="100%" cellpadding="10" cellspacing="2">
    <thead>

        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
        <th>CellPhone</th>
        <th>Update</th>
    </thead>
      <tbody>
        <tr ng-repeat="item in MyList.Contacts track by $index">

            <td class="align-center"><input type="text" ng-model="MyList.Contacts[$index].FirstName"> </input></td>
            <td class="align-center">{{MyList.Contacts[$index].Title}}</td>
            <td class="align-center">{{MyList.Contacts[$index].Email}}</td>
            <td class="align-center">{{MyList.Contacts[$index].CellPhone}}</td>
            <td class="align-center"><button ng-click="ShowNewForm(MyList.Contacts[$index])">Изменить</button></td>
        </tr>
    </tbody>
</table>

通过服务加载ajax数据

spApp.controller('spListCtrl', function spListCtrl($scope,dataService){

var Contacts;
var promiseObj=dataService.getContacts();
promiseObj.then(function(value) {

Contacts=value; 
 });

我检查调试,数据被分配到正常,但不显示。什么没试过,告诉我我做错了什么。

1 个答案:

答案 0 :(得分:1)

在使用controllerAs模式时,请将数据绑定变量绑定到this(控制器函数上下文),以便您可以使用别名MyList在HTML上访问它们(这是实例控制器功能)。

<强>代码

spApp.controller('spListCtrl', function spListCtrl(dataService){
   var self =  this
   var promiseObj=dataService.getContacts();
   promiseObj.then(function(value) {
      self.Contacts=value.data; 
  });
});

ng-repeat内使用item使绑定有效。

    <tr ng-repeat="item in MyList.Contacts track by $index">

        <td class="align-center"><input type="text" ng-model="item.FirstName"> </input></td>
        <td class="align-center">{{item.Title}}</td>
        <td class="align-center">{{item.Email}}</td>
        <td class="align-center">{{item.CellPhone}}</td>
        <td class="align-center"><button ng-click="ShowNewForm(item)">Изменить</button></td>
    </tr>