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

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

<!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>

来源

2017-07-07 Gowtham Raj

试图声明控制器等这个：app.controller（“myFirstController”，函数（$ scope）{你的代码}） –

第40行的意外令牌？我应该删除; ？ –

有在您的JSON数据的末尾的不必要;：

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

参阅下面固定例如：

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 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>

来源

2017-07-07 09:48:51 Pengyy

它实际上是; {名称：'Kai'，国家：'挪威'}};那是非法的。 – JasperZelf

@JasperZelf谢谢指出。我只是在错误的地方营销。：P – Pengyy

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

回答

相关问题