Data Binding not working in AngularJS

Question

Im now to AngularJs and i've created a test app. I'm using version 1.3.x and i have faced this problem. Here is the code for HtML and JS



var angular.module('ControllerExample', []).controller('SimpleController', SimpleController);

function SimpleController($scope) {
    $scope.customers = [
        { name: 'Customer 1', city: 'Gampaha'},
        { name: 'Customer 2', city: 'Negombo'},
        { name: 'Customer 3', city: 'Gampaha'},
        { name: 'Customer 4', city: 'Gampaha'},
        { name: 'Customer 5', city: 'Kadawatha'}
    ];
}
<!DOCTYPE html>
<html lang="en" ng-app="ControllerExample">

<head>
  <meta charset="utf-8">
  <title>AngularJS App</title>
  <link rel="stylesheet" href="css/style.css" />

</head>

<body>
  <div ng-controller="SimpleController">
    Customer Name:
    <input type="text" ng-model="name" />

    <h3>Adding a Simple Controller</h3>
    <ul>
      <li ng-repeat="cust in customers">{{ cust.name | uppercase }} - {{ cust.city }}</li>
    </ul>
  </div>

  <script type="text/javascript" src="js/script.js"></script>
  <script type="text/javascript" src="js/angular.min.js"></script>
</body>

</html>

Expected behavior is that when i run the app it should display the list of customers and when i filter it by entering a name in the textbox it should filter. But it only shows the binding statements. What am i doing wrong here. I've gone through the documentation and used it in my code. Still doesn't work. Thanks in advance.

zs2020 · Accepted Answer · 2014-09-24 07:07:53Z

2

Syntax error. Just remove the var:

angular.module('ControllerExample', []).controller('SimpleController', SimpleController);

answered Sep 24, 2014 at 7:07

zs2020

54.7k30 gold badges157 silver badges223 bronze badges

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

Comments

Aditya Singh · Accepted Answer · 2014-09-24 07:07:54Z

1

Try this out:- http://jsfiddle.net/adiioo7/jLLyzm7p/

var myAppModule= angular.module('ControllerExample', []).controller('SimpleController', SimpleController);

function SimpleController($scope) {
    $scope.customers = [{
        name: 'Customer 1',
        city: 'Gampaha'
    }, {
        name: 'Customer 2',
        city: 'Negombo'
    }, {
        name: 'Customer 3',
        city: 'Gampaha'
    }, {
        name: 'Customer 4',
        city: 'Gampaha'
    }, {
        name: 'Customer 5',
        city: 'Kadawatha'
    }];
}

answered Sep 24, 2014 at 7:07

Aditya Singh

9,6125 gold badges35 silver badges56 bronze badges

Comments

Mathieu Bertin · Accepted Answer · 2014-09-24 07:21:29Z

1

If I well understand you want to filter your customer in function of their names.

You're just missing to use your name with a filter on the ng-repeat.

Ex: Add in your controller

 $scope.nameFilter = function(customer) {
     if (!$scope.name) { // in case of name === null
        return true;
    }

    var searchVal = $scope.name,
        customerName = customer.name;

    var regex = new RegExp('' + searchVal, 'i');

    return regex.test(customerName);
}

Now in your template use

<li ng-repeat="cust in customers | filter:nameFilter"> <!-- List customers that will match with your filter -->
     ....
</li>

answered Sep 24, 2014 at 7:21

Mathieu Bertin

1,62411 silver badges11 bronze badges

Comments

Chief · Accepted Answer · 2014-09-24 07:26:30Z

Running verison.. You dont need var http://jsfiddle.net/adiioo7/jLLyzm7p/

<body ng-app="ControllerExample">
  <div ng-controller="SimpleController">
    Customer Name:
    <input type="text" ng-model="name" />

    <h3>Adding a Simple Controller</h3>
    <ul>
      <li ng-repeat="cust in customers">{{ cust.name | uppercase }} - {{ cust.city }}</li>
    </ul>
  </div>

  <script type="text/javascript" src="js/script.js"></script>
  <script type="text/javascript" src="js/angular.min.js"></script>
</body>







angular.module('ControllerExample', []).controller('SimpleController', SimpleController);

function SimpleController($scope) {
    $scope.customers = [
        { name: 'Customer 1', city: 'Gampaha'},
        { name: 'Customer 2', city: 'Negombo'},
        { name: 'Customer 3', city: 'Gampaha'},
        { name: 'Customer 4', city: 'Gampaha'},
        { name: 'Customer 5', city: 'Kadawatha'}
    ];
}

graphefruit · Accepted Answer · 2014-09-24 07:04:47Z

0

Try

cust["name"]  cust["city"]

instead of

cust.name

answered Sep 24, 2014 at 7:04

graphefruit

3645 silver badges18 bronze badges

Collectives™ on Stack Overflow

Data Binding not working in AngularJS

5 Answers 5

Comments

Try this out:- http://jsfiddle.net/adiioo7/jLLyzm7p/

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Try this out:- http://jsfiddle.net/adiioo7/jLLyzm7p/

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related