3

Здравствуйте, проблема состоит в следующем есть большой список стран. Данный список оформлен в качестве checbox. Переменная checkbox($_POST) является массивом. Собственно требуется сделать поле поиска по данному списку, чтобы к примеру из списка стран: Россия Китай Япония при вводе япония появлялось только это поле с галочкой которой я могу выбрать, но галочки которые я уже поставил оставались(то есть когда стеру из поискового поля то что искал, появился весь список стран и галочки которые я поставил остались)!

var app = angular.module('app', []);
app.controller('appCtrl', function($scope) {
  $scope.country = [{
    'name': 'Russia',
    'desc': 'Россия'
  }, {
    'name': 'Japan',
    'desc': 'Япония'
  }, {
    'name': 'China',
    'desc': 'Китай'
  }, {
    'name': 'USA',
    'desc': 'США'
  }];
});
ul {
  list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="app" ng-controller="appCtrl">
  <input ng-model="query">
  <ul>
    <li ng-repeat="item in country | filter:query">
      <label>
        <input name="{{item.name}}" type="checkbox">{{item.desc}}</label>
    </li>
  </ul>
</div>

Пользователь на стеке уже помог мне, но данный код при поиске и выборе галочки(когда найду) затирает предыдущие выбранные мною галочки! Прошу помощи(заранее благодарен).

P.S в прошлый раз мне писали, что я не внятно разъяснил(надеюсь на этот раз внятно!)

Пример представлен на рисунке(но нужно сделать так чтобы поставленные галочки сохранялись!!!) Пример

1 ответ 1

0

Вам надо добавить т.н. "binding" значений checkbox в вашу модель: чтобы при отметке чекбокса обновлялась модель, а при обновлении списка чекбоксов, признак их отмеченности брался из модели.

(Сейчас у вас при фильтрации перестраивается список checkbox'ов, все они не отмечены - как при первоначальной загрузке страницы.)

В AngularJS это делается установкой ng-model на каждом checkbox (документация по input[checkbox]):

        <input name="{{item.name}}" type="checkbox" 
               ng-model="item.selected">{{item.desc}}</label>

Исправленный пример:

var app = angular.module('app', []);
app.controller('appCtrl', function($scope) {
  $scope.country = [{
    'name': 'Russia',
    'desc': 'Россия'
  }, {
    'name': 'Japan',
    'desc': 'Япония'
  }, {
    'name': 'China',
    'desc': 'Китай'
  }, {
    'name': 'USA',
    'desc': 'США'
  }];
});
ul {
  list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="app" ng-controller="appCtrl">
  <input ng-model="query">
  <ul>
    <li ng-repeat="item in country | filter:query">
      <label>
        <input name="{{item.name}}" type="checkbox" 
               ng-model="item.selected">{{item.desc}}</label>
    </li>
  </ul>
</div>

3
  • Спасибо, то что нужно переделал под себя и вообще отлично!
    – vupsen
    16 июн 2015 в 11:30
  • @vavilon если ответ подходит, нажмите пожалуйста галку "принять", чтобы вопрос не фигурировал в списке неотвеченных.
    – Nickolay
    16 июн 2015 в 19:40
  • извините я на стеке новенький спасибо еще раз нажал!
    – vupsen
    16 июн 2015 в 20:59

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.