Question

我现在是AngularJs，我已经创建了一个测试应用程序。我使用的是1.3.x版，我遇到了这个问题。这是HtML和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>

预期的行为是，当我运行应用程序时，它应该显示客户列表，当我通过在文本框中输入名称来过滤它时，它应该过滤。但它只显示了绑定语句。我在这做错了什么。我已经浏览了文档并在我的代码中使用了它。仍然不起作用。提前谢谢。

Answer 1

语法错误。只需删除var：

即可

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

Answer 2

试试这个： - 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'
    }];
}

Answer 3

如果我完全理解你想根据他们的名字过滤你的顾客。

您只是缺少在ng-repeat上使用您的名字和过滤器。

例：添加您的控制器

 $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);
}

现在在您的模板中使用

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

Answer 4

正在运行的版本..你不需要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'} ]; }

Answer 5

尝试

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

而不是

cust.name

数据绑定在AngularJS中不起作用

5 个答案:

试试这个： - http://jsfiddle.net/adiioo7/jLLyzm7p/