CODEWITHSUNDEEP
javascriptangularjsangularjs-controller
Kasun Kodagoda
Kasun Kodagoda

Reputation: 4024

Data Binding not working in AngularJS

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.

Upvotes: 0

Views: 108

Answers (5)

Chief
Chief

Reputation: 914

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'}
    ];
}

Upvotes: 1

Mathieu Bertin
Mathieu Bertin

Reputation: 1624

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>

Upvotes: 1

Aditya Singh
Aditya Singh

Reputation: 9612

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'
    }];
}

Upvotes: 1

zs2020
zs2020

Reputation: 54504

Syntax error. Just remove the var:

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

Upvotes: 2

graphefruit
graphefruit

Reputation: 364

Try 

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

instead of

cust.name

Upvotes: 0

Related Questions