2

私は AngularJS の初心者で、Angular Material を使って何かを試しているので、アイデアや助けが必要です。

ng-repeat で表示される Font Awesome のアイコンがあります。

<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 チップである必要があります (リストには表示されなくなります)。

md-chip で「X」をクリックすると、item.active プロパティの状態だけが再び false に変わります。

Plunker に作業ファイルがあるので、現在の作業状態を読み取ることができます: https://plnkr.co/edit/t3Xpp2AKEJHXBWhkLUYZ?p=preview

これをどのように実装できますか？

4

2 に答える 2

2

これを行う最も簡単な方法は、アイテムに適用ng-clickすることです。これをクリックすると、次のように設定されます。md-chipactive = 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の例です。

編集：

activemd-chipsのみを表示するように plunker を変更しました。

それが役立つことを願っています。

于 2016-05-26T13:21:12.983 に答える