1

在完成了一些关于我的教程之后，AngularJS我现在正在自己编写我的第一个示例应用程序。我从显示一个非常简单的员工列表开始，效果很好。现在我想添加一个简单的文本过滤器，就像我在教程中学到的那样。

我在我的 html 中的列表以及我的 angularJS 控制器中添加了一个输入ng-model="filterText"和一个输入。| filter: filterText$scope.filterText = null;

当我现在在输入中输入任何内容时，什么也没有发生。当我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>

我的角JS：

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的回答：

在萤火虫中，我的 jsonObject 如下所示：

[{"id":1,"name":"John"},{"id":2,"name":"Jane"},{"id":3,"name":"Peter"}]

我用这个 jsonObject 更改了工作解决方案，它仍然工作正常，所以这不应该是问题......

更多信息：我正在使用 web api 2 控制器在 VS 2013 调试模式下工作，该控制器获取 sql 数据库的数据。我的 jsonfunction 只不过是对控制器的 ajax 请求。

编辑2：

当我不使用eval()时，没有任何变化。我成功获得了我的列表，但我不能使用过滤器......这是我的 Ajax 请求：

function jsonfunction(par) {

    $.ajax({

        url: url + par,

        async: false,

        success: function (data) {

            json = data;

        },

        headers: getSecurityHeaders()

    });

    return json;

}

答案在我的WebApiConfig.cs. 不可能有任何错误...

4

1 回答 1

0

jsonObjectjavascript 变量应该得到一些数据，如下所示

jsonObject=[{id:1,name:'Jessey'},
            {id:2,name:'John'},
            {id:3,name:'Mathew'},
            {id:4,name:'Sunny'}];

但是在您的代码jsonfunction中没有定义，并且使用 eval 评估它的目的是什么，而不是我们需要返回一个JSONthen 一切甚至过滤器都将按预期工作

jsonObject = eval(jsonfunction("parameters"));

也不要混淆JQuery，AngularJS因为这不是一个好习惯，请阅读 -使用 Jquery UI 插件和 Angular

为AJAX AngularJS自己提供$http

一个工作示例

编辑 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) {
        });    
}
于 2014-04-15T07:01:24.537 回答