Nano Hash - криптовалюты, майнинг, программирование

mdChips с фильтром

Я новичок в AngularJS, пробую что-то с Angular Material, и мне нужны идеи/помощь.

У меня есть значки Font Awesome, которые отображаются с помощью ng-repeat:

<ul ng-repeat="item in items">
  <i ng-class="{'test': item.active}" class="fa fa-{{item.name}}">{{item.name}}</i>
</ul>

Ниже у меня есть список значков с флажками:

<span ng-repeat="item in items | filter: item.active = false">
  <input type="checkbox" ng-model="item.active"> {{item.name}}<br>
</span>

Если флажок установлен, элемент списка должен исчезнуть из списка. Это работает с фильтром свойства item.active

Теперь я хочу отображать активированные элементы над списком с помощью md-chips (Angular Material Chips).

Таким образом, если элемент списка активирован, этот элемент должен быть чипом md над списком (больше не отображается в списке).

Если я нажму на «X» в md-chip, только состояние свойства item.active должно снова измениться на false.

У меня есть рабочие файлы в Plunker, поэтому мое текущее рабочее состояние можно прочитать: https://plnkr.co/edit/t3Xpp2AKEJHXBWhkLUYZ?p=preview

У кого-нибудь есть идея, как я могу это реализовать?

angularjs angular-material md-chip
26.05.2016

Ответы:


1

Самый простой способ сделать это — применить ng-click к элементу md-chip, и этим щелчком он установит active = false:

...
<md-chips class="custom-chips" ng-model="items | filter: {active:true}" readonly="true">
    <md-chip-template>
        <span ng-click="$chip.active=false">
            <strong>{{$chip.name}}</strong>
        </span>
    </md-chip-template>
</md-chips>
...

Вот пример plnkr.

ИЗМЕНИТЬ:

Изменен плункер для отображения только active md-чипов.

Надеюсь, это поможет.

26.05.2016
  • Да, это помогает, большое спасибо! Но у меня есть еще вопрос: как я могу создать md-чипы? Только активные элементы списка должны отображаться как чипы md. 26.05.2016
  • Я только что отредактировал plunker и ответил, чтобы показать, как это возможно 26.05.2016
  • Единственная проблема, которую я обнаружил с этим решением, заключается в том, что канал filter в ng-модели не поддерживается, что приводит к ошибкам и может привести к неправильному поведению других частей вашего приложения. Вы можете обойти это, создав отдельную коллекцию для передачи в ng-model директивы ng-chips. 07.09.2016

    • 2

    Вы можете отфильтровать массив чипов, используя встроенную функцию filterFilter. Наблюдатель, который содержит последний, будет вызывать прослушиватель всякий раз, когда изменяется filterText.

    ...
$scope.array = [
    "active directory",
    "outlook",
    "edrm",
    "gcdocs",
    "novell",
    "iPrint",
    "iManager",
    "sigma",
    "bitlocker",
];

$scope.filterText = "";

$scope.$watch('filterText', function(newValue, oldValue) {
    $scope.filteredArray = filterFilter($scope.array, $scope.filterText);
}, false);
...

    Следующая разметка будет отображать и фильтровать набор микросхем.

    <md-content flex class="md-padding">
  <label>Filter: <input ng-model="searchText"></label>
  <md-chips ng-model="filteredArray" readonly="ctrl.readonly"
    md-removable="removable" placeholder="Enter an issue...">
    <md-chip-template>
      <strong>{{$chip}}</strong>
    </md-chip-template>
  </md-chips>
</md-content>

    Дополнительную информацию о фильтрах см. на странице https://docs.angularjs.org/guide/filter.

    Для получения дополнительной информации о $watch см. https://docs.angularjs.org/api/ng/type/$rootScope.Scope

    09.02.2017
    Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..