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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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