Question

在完成关于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。没有任何错误...

Answer 1

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) {
        });    
}

angularJS - ng-model没有更新

1 个答案: