Question

我必须完成这项任务。我正在尝试打印contactsController中的联系人，并能够添加到此列表。我无法弄清楚我哪里出错了。谁能帮忙。我在contactController中有一个数组contacts []，我试图使用ng-repeat =＆＃34;联系contactController.contacts＆＃34;在html中打印出列表。并绑定到contact.name和contact.type。

<!doctype html>
<html ng-app>
<head>
<style>
</style>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>

</head>
<body>
<div ng-controller="contactsController">
<label>Name</label>
    <input ng-model="contactsController.contacts.name" type="text" placeholder="Name">
<label>email</label>
<input ng-model="contactsController.email" type="text" placeholder="Email">
<button ng-click="addContact()">Add contact</button>
</div>
<div>{{contactsController.name}}</div>
<div>
    <ul>

        <li ng-repeat="contact in contactsController.contacts">
            <div>{{contact.name}}</div>
            <div>{{contact.email}}</div>
            <div><button ng-click="deleteContact($index)">delete</button></div>
        </li>
    </ul>

</div>
    <script>
// Your code goes here.

    // $( document ).ready(function() {
    //  alert('jQuery asdfas!');
// Your code here.
// });
function contactsController($scope){
    $scope.contacts=[{name:'asdf',email:'asdf'},
    {name:'yweuir',email:'xcvzx'}
    ];
    contactsController.prototype.addContact =function($scope){
        console.log(this.name);
        console.log(this.email);
        this.contacts.push({name:this.name,email:this.email});
    }
}
</script>
</body>
</html>

Answer 1

你的重复是错误的。它应该是：

ng-repeat="contact in contacts"

当你重复时，对数组的引用假设它已经在$ scope中。你的控制器与它无关。所以如果你有：

$scope.contractsController = {
  contacts: {...}
}

您的代码可以使用。但你的控制器很好，只需从重复中删除引用。

Answer 2

我将创建一个plunker，以便您可以检查修订版中的详细信息更改。

http://plnkr.co/edit/NrbLiIFw4EbxEfYJm41J?p=preview

HTML有一个错误的缩进，ng-repeat在ng-controller块之外。

此外，由于缺少将控制器注入应用程序模块，我使用ngApp指令的一般应用程序声明重写了应用程序。

如果您想要更详细的示例，可以查看TodoMVC角度应用程序 https://github.com/tastejs/todomvc/tree/gh-pages/architecture-examples/angularjs-perf

其他例子： http://todomvc.com/architecture-examples/angularjs/#/

一切顺利

Answer 3

嘿我将创建一个plnkr链接。

这是链接检查：

 http://plnkr.co/edit/mzcAC5yU9P6Mb3nfGByP?p=preview

这是代码：

<!DOCTYPE html>
<html ng-app = "app">
 <head>
 <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"> 
  </script>
  <script>
   angular.module("app",[]).controller('contactsController',['$scope', 
    function($scope) {
     $scope.contacts=[{name:'Abhi',email:'Abhi@test.com'},
        {name:'Sharma',email:'sharma@test.com'}
     ];
     $scope.addContact =function(){
      this.contacts.push({name:this.name,email:this.email});
      $scope.name = '';
      $scope.email = '';
     }
     $scope.deleteContact = function (index) {
      $scope.contacts.splice(index, 1);
     }
    }
   ]);
  </script>
 </head>
<body ng-controller="contactsController">
    <label>Name</label>
    <input ng-model="name" type="text" placeholder="Name">
    <label>email</label>
    <input ng-model="email" type="text" placeholder="Email">
    <button ng-click="addContact()">Add contact</button>
  <div>
    <ul>
      <li ng-repeat="contact in contacts">
        <div>{{contact.name}}</div>
        <div>{{contact.email}}</div>
        <div><button ng-click="deleteContact($index)">delete</button></div>
      </li>
    </ul>
  </div>
 </body>
</html>

可能对你有帮助.. 感谢

Answer 4

您不会在值前添加控制器名称。 ng-controller部分基本上将子元素的范围设置为控制器的实例。因此，目前代码中发生的事情是它正在检查contactsController属性contactsController。

ng-controller应用程序数据无法正确绑定

4 个答案: