angularJS - ng-модель не обновляется

После работы над некоторыми руководствами по 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>

My 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, и оно все еще работает нормально, так что это не должно быть проблемой...

Дополнительная информация: я работаю в режиме отладки VS 2013 с контроллером веб-api 2, который получает данные базы данных sql. Моя функция json — это не что иное, как ajax-запрос к контроллеру.

EDIT2:

Когда я не использую eval(), ничего не меняется. Я успешно получаю свой список, но не могу использовать фильтр... вот мой запрос Ajax:

function jsonfunction(par) {

    $.ajax({

        url: url + par,

        async: false,

        success: function (data) {

            json = data;

        },

        headers: getSecurityHeaders()

    });

    return json;

}

Ответ отформатирован в формате JSON в моем файле WebApiConfig.cs. Ошибки быть не могло...


person Fabi    schedule 15.04.2014    source источник
comment
функция json не определена.....   -  person Nidhish Krishnan    schedule 15.04.2014
comment
О... функция json работает нормально. Список появляется. Я просто не добавлял код к этому вопросу. jsonfunction дает мне хорошо отформатированный объект json. Я уже давно работаю с этой функцией, так что проблем быть не должно. Я просто не могу использовать фильтр.   -  person Fabi    schedule 15.04.2014
comment
просто взгляните на мой ответ, функция json возвращает json, как показано там, все работает нормально, даже фильтр все работает нормально   -  person Nidhish Krishnan    schedule 15.04.2014
comment
надеюсь вы так поняли......   -  person Nidhish Krishnan    schedule 15.04.2014
comment
Зачем вообще нужен eval? Это никогда не хорошая идея, чтобы использовать его.   -  person Oleg    schedule 15.04.2014


Ответы (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, поскольку это не является хорошей практикой, пожалуйста, прочитайте - Использование подключаемого модуля пользовательского интерфейса Jquery с 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) {
        });    
}
person Nidhish Krishnan    schedule 15.04.2014
comment
Спасибо за ответ, но я все еще в замешательстве. Я отредактировал свой вопрос, было бы здорово, если бы вы могли посмотреть. Мой jsonObject работает и в вашем примере... могут ли возникнуть проблемы с angularJS в связи с настройкой моего проекта? - person Fabi; 15.04.2014
comment
можете ли вы показать мне свой вызов ajax, который определен, который, как вы говорите, возвращает JSON - person Nidhish Krishnan; 15.04.2014
comment
Снова отредактировал мой вопрос. Мой запрос без eval() ничего не меняет. Я разместил свой запрос Ajax выше. Думаю проблем быть не должно. - person Fabi; 15.04.2014
comment
@Fabi, один совет ... не путайте jquery с angular, это не лучшая практика, поскольку сам ajax Angular предоставляет http://docs.angularjs.org/api/ng/service/%24http - person Nidhish Krishnan; 15.04.2014
comment
@Fabi проверьте мое редактирование ..... составьте обещание, включив угловой цикл в блок успеха вызова ajax - person Nidhish Krishnan; 15.04.2014
comment
Прости за мой запоздалый ответ. Я пытался использовать $http вместо моего запроса ajax, но теперь мои результаты $scope.results выглядят как [object Object], [object Object],... и мой список больше не отображается... так что есть проблема с мои данные? данные в успехе (данные) дают мне правильный json? - person Fabi; 15.04.2014
comment
@ Фаби, хорошо, попробуй console.log(JSON.stringify($scope.results)); вместо console.log($scope.results), проверь, если ... - person Nidhish Krishnan; 15.04.2014
comment
давайте продолжим это обсуждение в чате - person Nidhish Krishnan; 15.04.2014