0

Имеем список (чекбокс), как сделать еще 1 отдельный список и форму динамического поиска к нему(не получается чего-то) вот мой пример

      var app = angular.module('app', []);
app.controller('appCtrl', function($scope) {
  $scope.country = [
                    { 'name': 'Австрия', 'desc': 'Австрия', 'check': true },
                    { 'name': 'Азербайджан', 'desc': 'Азербайджан',  'check': false  },
                    { 'name': 'Албания', 'desc': 'Албания',  'check': true  }
                    ];
});
       <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="country" type="checkbox" ng-model="item.check"  ng-checked="{{item.check}}" value="{{item.desc}}" >{{item.desc}}</label>
          
    </li>
  </ul>
</div>

Нужно на 1 странице сделать еще 1 такую форму поиска

4
  • я не понял вопроса. Нужно чтобы было два подобных списка на странице? У каждого свой поиск или этот не работает?
    – zhenyab
    30 июл 2015 в 12:03
  • да 2 списка с двумя различными строками поиска на одной странице по своему списку!(этот для 1 страницы для 2-ух косяк не подргружает контроллер)
    – vupsen
    30 июл 2015 в 12:04
  • 1
    по моему разумению нужно создать директиву, которая будет использовать этот контроллер, и тогда можно вставлять где угодно этот список.
    – zhenyab
    30 июл 2015 в 12:11
  • если не трудно сделайте пример
    – vupsen
    30 июл 2015 в 12:16

1 ответ 1

1

Что-то в это роде:

var app = angular.module('app', []);

    app.directive('myList', function () {
        return {
            restrict: 'E',
            require: 'ngModel',
             scope: {},
            template: function (el, attr) {

                return '<input type="text" ng-model="' + attr.ngModel + '">' +
                        '<ul>' +
                        '<li ng-repeat="item in country | filter:' + attr.ngModel + '">' +
                        '<label>' +
                        '<input name="country" type="checkbox" ng-model="item.check" ng-checked="{{item.check}}" value="{{item.desc}}">{{item.desc}}</label>' +
                        '</li>' +
                        '</ul>';
            },
            controller: function ($scope) {
                $scope.country = [
                    {'name': 'Австрия', 'desc': 'Австрия', 'check': true},
                    {'name': 'Азербайджан', 'desc': 'Азербайджан', 'check': false},
                    {'name': 'Албания', 'desc': 'Албания', 'check': true}
                ];
            },
            link: function (scope, element, attrs) {
                element.removeAttr('ng-model');
            }
        };
    });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="app">

    <my-list ng-model="query"></my-list>
    <my-list ng-model="query1"></my-list>
    <my-list ng-model="query2"></my-list>
</div>

4
  • в вашем примере список общий я имел ввиду : "да 2 списка с двумя различными строками поиска на одной странице по своему списку"
    – vupsen
    30 июл 2015 в 12:32
  • 1
    строки поиска различные, список тот же. Каждая строка поиска отвечает за список под ней. Т.е. если я ввожу в одном поле, не изменяются все списки одновременно. Либо я чего-то не понимаю в задании.
    – zhenyab
    30 июл 2015 в 12:36
  • Каждая строка за разный список должны отвечать, и у вас если выбиру галочку она везде поставиться
    – vupsen
    30 июл 2015 в 12:40
  • Упс, забыл изолировать scope :)
    – zhenyab
    30 июл 2015 в 12:46

Ваш ответ

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

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