CODEWITHSUNDEEP
angularjs
user3490188
user3490188

Reputation: 509

ng-controller App data not binding properly

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>

Upvotes: 1

Views: 377

Answers (4)

Abhishek
Abhishek

Reputation: 295

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

Upvotes: 1

Carlos Mantilla
Carlos Mantilla

Reputation: 413

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

Upvotes: 1

Tim Brown
Tim Brown

Reputation: 3241

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.

Upvotes: 0

Shan Robertson
Shan Robertson

Reputation: 2742

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.

Upvotes: 2

Related Questions