在完成关于AngularJS
的一些教程后,我现在正在编写我自己的第一个示例应用程序。我开始展示一个非常简单的员工名单,这很好。现在我想添加一个简单的文本过滤器,就像我在教程中学到的那样。
我将ng-model="filterText"
和| filter: filterText
的输入添加到我的html中的列表以及$scope.filterText = null;
到我的angularJS控制器。
当我现在输入任何内容时,没有任何反应。当我将filterText
值直接设置到我的AngularJS
控制器时,过滤器正在运行,因此更新textFilter
的值时会出现问题。
我能做些什么才能让它发挥作用?我已经找到了解决方案,但没有任何帮助。
我的HTML
<div class="container main-frame" ng-app="Employees" ng-controller="mainController" ng-init="init()">
<div id="searchbox">
<label>Filter: </label>
<input type="text" ng-model="filterText" />
</div>
<div id="emplist">
<h2>Employees</h2>
<p>
<ul id="emps">
<li ng-repeat="mitarbeiter in results | filter: filterText">
# {{mitarbeiter.id}} - <strong>{{mitarbeiter.name}}</strong>
</li>
</ul>
</p>
</div>
我的angularJS:
var app = angular.module('Employees', []);
app.controller("mainController", function ($scope) {
$scope.results = [];
$scope.filterText = null;
$scope.init = function(){
jsonObject = eval(jsonfunction("parameters"));
angular.forEach(jsonObject, function (mitarbeiter, key) {
$scope.results.push(mitarbeiter);
});
}
})
修改
根据 NidhishKrishnan 的答案:
在firebug中,我的jsonObject如下所示:
[{"id":1,"name":"John"},{"id":2,"name":"Jane"},{"id":3,"name":"Peter"}]
我用这个jsonObject更改了工作解决方案,它仍然正常工作,所以这应该不是问题......
更多信息:我正在使用web api 2控制器在VS 2013调试模式下工作,该控制器获取sql数据库的数据。我的jsonfunction只不过是对控制器的ajax请求。
EDIT2:
当我不使用eval()
时,没有任何变化。我成功获取了我的列表,但我无法使用过滤器...这是我的Ajax请求:
function jsonfunction(par) {
$.ajax({
url: url + par,
async: false,
success: function (data) {
json = data;
},
headers: getSecurityHeaders()
});
return json;
}
答案在WebApiConfig.cs
内格式化为JSON。没有任何错误...
答案 0 :(得分:0)
jsonObject
javascript变量应该得到一些数据,如下所示
jsonObject=[{id:1,name:'Jessey'},
{id:2,name:'John'},
{id:3,name:'Mathew'},
{id:4,name:'Sunny'}];
但是在你的代码jsonfunction
中没有定义,而使用eval评估它的目的是什么呢?我们需要返回JSON
然后所有内容甚至过滤所有内容都可以正常工作
jsonObject = eval(jsonfunction("parameters"));
也不要将JQuery
与AngularJS
混淆,因为它不是一个好的做法,请阅读 - Using Jquery UI plugin with Angular
AJAX
AngularJS
本身提供$http
<强> A Working Example 强>
编辑1
$scope.init = function()
{
$http({
method: 'GET',
url: '/someUrl'
}).
success(function (data, status, headers, config) {
angular.forEach(data, function (mitarbeiter, key) {
$scope.results.push(mitarbeiter);
});
}).
error(function (data, status, headers, config) {
});
}