ng-controller App data not binding properly

Question

I have to finish this assignment. I am trying to print out the contacts in contactsController and be able to add to this list. I can't figure out where I am going wrong. Can anyone help. I have an array contacts[] in contactController and I am trying to print out the list in html using ng-repeat="contact in contactsController.contacts" and binding to contact.name and 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>

Shan Robertson · Accepted Answer · 2014-04-16 21:16:22Z

2

Your repeat is wrong. It should be:

ng-repeat="contact in contacts"

When you are doing a repeat, the reference to the array assumes it's in $scope already. Your controller has nothing to do with it. So if you had:

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

Your code would work. But your controller is fine, just remove the reference from the repeat.

answered Apr 16, 2014 at 21:16

Shan Robertson

2,7423 gold badges26 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3490188 Over a year ago

it still doesn't print anything. could something else be wrong.

user3490188 Over a year ago

it works now. I was terminating the ng-controller div early and the data binding expression was outisde the scope of the controller

Shan Robertson Over a year ago

Oh! Man I didn't even consider that part. But yeah, @carlosmantilla did work!

Carlos Mantilla · Accepted Answer · 2014-04-16 22:09:57Z

1

I'll create a plunker so you can check the detail changes in the revisions.

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

The HTML had a wrong indentation, and the ng-repeat was outside of the ng-controller block.

Also, was missing the injection of the controller into the module of the application, i rewrote the application using the general application declaration with ngApp directive.

If you want an example more detailed you can check the TodoMVC angular application https://github.com/tastejs/todomvc/tree/gh-pages/architecture-examples/angularjs-perf

Other examples: http://todomvc.com/architecture-examples/angularjs/#/

All the best

edited Apr 16, 2014 at 22:09

answered Apr 16, 2014 at 22:03

Carlos Mantilla

4134 silver badges10 bronze badges

Comments

Abhishek · Accepted Answer · 2014-12-08 11:26:49Z

Hey I'll create a plnkr link.

Here is link Check this:

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

Here is Code:

<!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:'[email protected]'},
        {name:'Sharma',email:'[email protected]'}
     ];
     $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>

May be it help you.. Thanks

Tim Brown · Accepted Answer · 2014-04-16 21:16:43Z

0

You don't prefix your values with the controller name. The ng-controller section basically sets the scope for the child elements to an instance of the controller. So what's happening in your code currently is that it's checking the contactsController for an attribute of contactsController.

answered Apr 16, 2014 at 21:16

Tim Brown

3,2411 gold badge20 silver badges16 bronze badges

Collectives™ on Stack Overflow

ng-controller App data not binding properly

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related