Как скрыть и показать добавить и удалить значок материала в angularjs?

Я использовал значок материала (добавить и удалить), чтобы добавить или удалить некоторые элементы в элементах md-list. Моя цель - скрыть значок добавления и показать значок удаления, если пользователь нажимает кнопку «Добавить». ИЛИ, если пользователь нажимает кнопку «Удалить», тогда вместо значка «Удалить» появится значок «Добавить». как на кликеКак скрыть и показать добавить и удалить значок материала в angularjs?

<i class="material-icons md-avatar-icon add-rm-icon margin-right">add</i> 

    <i class="material-icons md-avatar-icon add-rm-icon margin-right">remove</i>

источник

2017-02-17 Anonymous

работает скрипку https://jsfiddle.net/2qzno7jw/ –

создать булево объем переменной 'isAdd' например; отрицайте, что каждый раз, когда вы нажимаете на одну из кнопок – Laazo

@ Азола Спасибо за предложение. Я новичок в angularjs. –

Вот еще один способ сделать это.

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

 
app.controller('ctrl', function($scope) { 
 
    $scope.add= false; 
 
});

/* Rules for sizing the icon. */ 
 
.material-icons.md-18 { font-size: 18px; } 
 
.material-icons.md-24 { font-size: 24px; } 
 
.material-icons.md-36 { font-size: 36px; } 
 
.material-icons.md-48 { font-size: 48px; } 
 

 
/* Rules for using icons as black on a light background. */ 
 
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); } 
 
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); } 
 

 
/* Rules for using icons as white on a dark background. */ 
 
.material-icons.md-light { color: rgba(255, 255, 255, 1); } 
 
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" /> 
 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
<body ng-app="app" ng-controller="ctrl"> 
 
    <div class="col-lg-12"> 
 
    <div class="row"> 
 
     <a href="#" class="btn btn-primary" ng-click="added = true" ng-show="!added"><i class="material-icons">add</i> Add</a> 
 
     <a href="#" class="btn btn-primary" ng-click="added = false" ng-show="added"><i class="material-icons">remove</i> Remove</a> 
 
    </div> 
 
    <div> 
 
     Current State: {{added ? 'Added' : 'Not Added'}} 
 
    </div> 
 
    </div> 
 
</body>

источник

2017-02-17 14:38:51 Alok

Вы можете использовать переменную scope, чтобы отображать и скрывать кнопку добавления и удаления.

Вот код.

HTML код

<div ng-controller="TempController"> 
<md-button ng-click="toggle = !toggle" class='md-primary md-raised'> Click Me!! </md-button> 
<md-icon ng-if='toggle'>add</md-icon> 
<md-icon ng-if='!toggle'>remove</md-icon> 
</div>

angular.module('myApp',['ngMaterial']) 
.controller('TempController', function($scope){ 
    $scope.toggle = false; 
});

Рабочая Codepen.

источник

2017-02-17 07:01:27 nextt1

Поскольку вы используете угловые, самый простой способ будет использовать либо ng-if из ng-show или ng-hide

ng-if фактически делают/derender кнопок, в то время как две другие будут просто покажите и скройте их, используя css. Тогда все, что вам нужно сделать, это установить их в значение в вашем контроллере.

<i ng-if="$ctrl.add" ng-click="$ctrl.add= !$ctrl.add"> Add </i> 
 
<i ng-if="!$ctrl.add" ng-click="$ctrl.add= !$ctrl.add"> Remove </i>

источник

2017-02-17 14:45:47 irongollem

-2

Это проще:

<md-button class="material-icons md-avatar-icon add-rm-icon margin-right"> 
    <md-icon ng-click="add=!add">{{(add== true) ? 'add' : 'remove'}}</md-icon> 
</md-button>

источник

2017-05-22 11:17:00

Как скрыть и показать добавить и удалить значок материала в angularjs?

ответ

Смежные вопросы