Question

我是新手使用AngularJS，我是一个绝对的初学者。我尝试使用过滤器。我尝试绑定到属性而不是直接绑定对象。但代码显示{{x.people}}作为输出而不是显示列表。我在这里错过了什么？

<!DOCTYPE html>
<html>

<head>
    <title>ANGULAR APP</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
    </script>
</head>

<body ng-app="myApp" ng-controller="myFirstController">
    <p>Type a letter in the input field:</p>
    <p><input type="text" ng-model="test"></p>
    <ul>
        <li ng-repeat="x in model.people">
            {{ x.name }}
        </li>
    </ul>
</body>

<script>
var app = angular.module('myApp', []);
var myFirstController = function($scope) {
    $scope.model = {
        people: [{
                name: 'Jani',
                country: 'Norway'
            },
            {
                name: 'Carl',
                country: 'Sweden'
            },
            {
                name: 'Margareth',
                country: 'England'
            },
            {
                name: 'Hege',
                country: 'Norway'
            },
            {
                name: 'Joe',
                country: 'Denmark'
            },
            {
                name: 'Gustav',
                country: 'Sweden'
            },
            {
                name: 'Birgit',
                country: 'Denmark'
            },
            {
                name: 'Mary',
                country: 'England'
            },
            {
                name: 'Kai',
                country: 'Norway'
            }
        ];
    };
}

app.controller('myFirstController', myFirstController);
</script>
</html>

Answer 1

json数据末尾有一个不必要的;：

$scope.model = {
  people:[
    ...                                   // your data
    {name:'Kai',country:'Norway'}];       // <------ here the ; is illegal
  };          
}

参考下面的固定示例：

＆＃13;

var app = angular.module('myApp', []);
var myFirstController = function($scope) {
  $scope.model = {
    people: [{
        name: 'Jani',
        country: 'Norway'
      },
      {
        name: 'Carl',
        country: 'Sweden'
      },
      {
        name: 'Margareth',
        country: 'England'
      },
      {
        name: 'Hege',
        country: 'Norway'
      },
      {
        name: 'Joe',
        country: 'Denmark'
      },
      {
        name: 'Gustav',
        country: 'Sweden'
      },
      {
        name: 'Birgit',
        country: 'Denmark'
      },
      {
        name: 'Mary',
        country: 'England'
      },
      {
        name: 'Kai',
        country: 'Norway'
      }
    ]
  };
}

app.controller('myFirstController', myFirstController);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myFirstController">
  <p><input type="text" ng-model="test"></p>
  <ul>
    <li ng-repeat="x in model.people | filter: {name: test}">
      {{ x.name }}
    </li>
  </ul>
</div>

＆＃13;

AngularJS：如何将对象的属性绑定到作用域

1 个答案: