AngularJS Filteriing搜索结果:错误:[NG:AREQ]
问题描述:
我试图来过滤angularjs搜索结果和我得到这个错误我的铬控制台上:错误:[NG:AREQ]AngularJS Filteriing搜索结果:错误:[NG:AREQ]
这是我的代码片断
<div id="notebooks" ng-controller="NotebookListCtrl">
<input type="text" id="query" ng-model="query"/>
<select ng-model="orderList">
<option value="name">By name</option>
<option value="-age">Newest</option>
<option value="age">Oldest</option>
</select>
<ul id="notebook_ul">
<li ng-repeat="notebook in notebooks | filter:query | orderBy: orderList">
name: {{notebook.name}}<br/>
procesor: {{notebook.procesor}}<br/>
<div class="right top">{{notebook.age}}</div>
</li>
</ul>
<span>Number of notebooks: {{notebooks.length}}</span>
</div>
这是我做了 http://plnkr.co/edit/P1DFr3fEuWiYGfC0k7bj?p=preview
一切似乎都不错,但我不知道为什么我收到上述错误普拉克。
答
定义控制器正确如下
更新:http://plnkr.co/edit/P1DFr3fEuWiYGfC0k7bj?p=preview
var app = angular.module("myApp",["ngSanitize"]);
app.controller('NotebookListCtrl',['$scope',function($scope){
$scope.notebooks = [
{"name": "Lenovo",
"procesor": "Intel i5",
"age": 2011},
{"name": "Toshiba",
"procesor": "Intel i7",
"age": 2010},
{"name": "Toshiba",
"procesor": "Intel core 2 duo",
"age": 2008},
{"name": "HP",
"procesor": "Intel core 2 duo",
"age": 2012},
{"name": "Acer",
"procesor": "AMD",
"age": 2006},
{"name": "Lenovo",
"procesor": "Intel i5",
"age": 2009},
{"name": "Toshiba",
"procesor": "Intel i7",
"age": 2008},
{"name": "Lenovo",
"procesor": "Intel i5",
"age": 2011},
{"name": "Toshiba",
"procesor": "Intel i7",
"age": 2010},
{"name": "Toshiba",
"procesor": "Intel core 2 duo",
"age": 2008},
{"name": "HP",
"procesor": "Intel core 2 duo",
"age": 2012},
{"name": "Acer",
"procesor": "AMD",
"age": 2006},
{"name": "Lenovo",
"procesor": "Intel i5",
"age": 2009},
{"name": "Toshiba",
"procesor": "Intel i7",
"age": 2008},
{"name": "Lenovo",
"procesor": "Intel i5",
"age": 2011},
{"name": "Toshiba",
"procesor": "Intel i7",
"age": 2010},
{"name": "Toshiba",
"procesor": "Intel core 2 duo",
"age": 2008},
{"name": "HP",
"procesor": "Intel core 2 duo",
"age": 2012},
{"name": "Acer",
"procesor": "AMD",
"age": 2006},
{"name": "Lenovo",
"procesor": "Intel i5",
"age": 2009},
{"name": "Toshiba",
"procesor": "Intel i7",
"age": 2008}
];
$scope.orderList = "name";
}]);
答
的错误是
Argument 'NotebookListCtrl' is not a function, got undefined
如果你点击哪一个容易找到the url旁边[NG:AREQ]在浏览器控制台
你得到这个错误,因为你没有定义在控制器正确的方法。 1.2后AngularJS不允许“控制器为全局函数”语法,而不是你需要把它添加到您的模块,像这样:
angular.module("myApp").controller('NotebookListCtrl',NotebookListCtrl);
做微小,安全注射,你还应该做到以下几点
NotebookListCtrl.$inject = ['$scope'];
答
angular.module("myApp",["ngSanitize"])
.controller('NotebookListCtrl', ['$scope',
function ($scope) {
$scope.notebooks = [
{"name": "Lenovo",
"procesor": "Intel i5",
"age": 2011},
{"name": "Toshiba",
"procesor": "Intel i7",
"age": 2010},
{"name": "Toshiba",
"procesor": "Intel core 2 duo",
"age": 2008},
{"name": "HP",
"procesor": "Intel core 2 duo",
"age": 2012},
{"name": "Acer",
"procesor": "AMD",
"age": 2006},
{"name": "Lenovo",
"procesor": "Intel i5",
"age": 2009},
{"name": "Toshiba",
"procesor": "Intel i7",
"age": 2008},
{"name": "Lenovo",
"procesor": "Intel i5",
"age": 2011},
{"name": "Toshiba",
"procesor": "Intel i7",
"age": 2010},
{"name": "Toshiba",
"procesor": "Intel core 2 duo",
"age": 2008},
{"name": "HP",
"procesor": "Intel core 2 duo",
"age": 2012},
{"name": "Acer",
"procesor": "AMD",
"age": 2006},
{"name": "Lenovo",
"procesor": "Intel i5",
"age": 2009},
{"name": "Toshiba",
"procesor": "Intel i7",
"age": 2008},
{"name": "Lenovo",
"procesor": "Intel i5",
"age": 2011},
{"name": "Toshiba",
"procesor": "Intel i7",
"age": 2010},
{"name": "Toshiba",
"procesor": "Intel core 2 duo",
"age": 2008},
{"name": "HP",
"procesor": "Intel core 2 duo",
"age": 2012},
{"name": "Acer",
"procesor": "AMD",
"age": 2006},
{"name": "Lenovo",
"procesor": "Intel i5",
"age": 2009},
{"name": "Toshiba",
"procesor": "Intel i7",
"age": 2008}
];
$scope.orderList = "name";
}
]);
+0
你的答案是方法没问题。 – Blaze
@JnG,。是的,你可以,但你的重复。当然可以使用'ng-src'指令,它为视图中的img标签提供图像的路径。 –
请upvote我的问题。谢谢 – Blaze