2013-11-18 6 views
0

Я пытаюсь изучить AngularJS, но застрял на моей функции фильтра.AngularJs, проблемная функция фильтра

У меня есть файл JSON, содержащий людей и сервис & Контроллер, который загружает его.

[{ 
"id": "000000-0000", 
"name": "John Doe" 
}, 
... 

До сих пор так хорошо, то в моей форме, который подключен к person.id & person.name Я хотел бы иметь возможность выбрать текущий человека с помощью SearchBox. Я создал поле ввода с именем searchText и написал функцию searchFilter. Я хотел бы установить $ scope.person, чтобы соответствовать критериям SearchText так, что он обновляет свои inputboxes (person.name, person.id с соответствующими значениями.

.controller('MyCtrl1', ['$scope', 'Persons', function($scope, Persons) { 
    $scope.persons = Persons.query(); 

    $scope.searchFilter = function(obj) { 
     var p = new RegExp($scope.searchText, 'i'); 
     $scope.person = ???? 
      }; 

     }]) 

Как это может быть сделано? Путем применения тот же фильтр для каждого отдельного входа? С уважением

ОБНОВЛЕНИЕ: Чтобы уточнить, если searchText не соответствует ни одному или нескольким сообщениям, форма остается пустой. Если и когда она соответствует уникальному сообщению, это сообщение становится $ scope.person и форма заполняется личными значениями

+0

создать простую демонстрацию, показывающую, как вы хотите это использовать – charlietfl

ответ

0

На самом деле есть встроенный фильтр в угловом, что делает это для вас. Он называется «фильтр». Так держать поиск поле searchText, просто написать нг-повторение, как

ng-repeat="person in persons | filter:searchText" 

Довольно просто.

Edit: из угловых Docs http://docs.angularjs.org/api/ng.filter:filter

+0

не выполняет то, что хотел, чтобы заполнить другую привязку 'ng-model' – charlietfl

+0

Правда, это работает, но у меня нет никаких ng-повторителей, У меня есть форма, связанная с person.name, person.id и т. Д. Не могу понять, как я буду обновлять свой параметр scope.person с помощью моего фильтра. – elwis

+0

@elwis Вам необязательно использовать ' нг-repeat'. Вы можете использовать фильтр в своем контроллере как '$ filter ('filter') (массив, выражение, компаратор)'. Поэтому привяжите ваш $ scope.persons к массиву (первый аргумент в $ filter) и просто измените выражение/компаратор, передав текст в поле поиска. $ filter просто вернет новый массив с отфильтрованными значениями – trekforever

0

actApp.directive ('locinput', [ 'композитный', 'компонент', функция (композитный, компонентный) { возвращение { ограничение: 'AE', заменить : правда, шаблон: "",

link: function ($scope, $element, $attrs){ 
     //Add the element to the main components collection 
     $scope.components.push($element); 

     var compileTag; 
     var htmlTag; 

     htmlTag= "<input3p id='inputTxt"+$attrs.index+"' chars='"+$attrs.chars+"' index='"+$attrs.index+"' answer='"+$attrs.answer+"' size='"+$attrs.size+"'></input3p>" 
     compileTag = component.getCompiledTag($scope, htmlTag); 
     $element.append(compileTag); 

     htmlTag = "<label3p id='correctText' text='answer["+$attrs.answer+"], question[7]' class='correctText'></label3p>"; 
     compileTag = component.getCompiledTag($scope, htmlTag) 
     $element.append(compileTag); 

     $scope.$on(SUBMISSION, function (event, correct) { 
      $('.input3p').attr("disabled", true); 
      $("#submit3p").css({"pointer-events":"none"}); 
      $("#submit3p").attr("disabled",true); 

      if(!correct){ 
       $('.correctText').css({visibility: 'visible'}); 
       $('#redDivide').css({visibility: 'visible'}); 
       $element[0].show['cross'](); 
      }else{ 
       $element[0].show['tick'](); 
      } 
     }); 

     $element.bind("keydown", function (event) { 
      if (event.keyCode == 32) { 
       event.preventDefault(); 
      } 
      }); 

     component.annunciator($scope, $element, $attrs, 'tick'); 
     component.annunciator($scope, $element, $attrs, 'cross'); 
     component.position($scope, $element, $attrs); 
     component.size($scope, $element, $attrs); 
    } 
} 

}]);

Смежные вопросы