Javascript 如何在angularjs中隐藏和显示添加和删除材质图标？

我使用了2个材质图标（添加和删除）来添加或删除md列表项中的某些项。我的目标是隐藏添加图标，并在用户单击添加时显示删除图标。或者，如果用户单击删除，则会出现添加图标而不是删除图标。两者都可以点击

  <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>

添加
去除

您可以使用一个简单的

范围

变量来显示和隐藏添加和删除按钮

这是代码

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>

---

工作。

您可以使用一个简单的

范围

变量来显示和隐藏添加和删除按钮

这是代码

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>

---

工作。

这里是另一种方法

var-app=angular.module（'app'，[]）；
应用程序控制器（'ctrl'，函数（$scope）{
$scope.add=false；
});
/*调整图标大小的规则*/
.material-icons.md-18{字体大小：18px；}
.material-icons.md-24{字体大小：24px；}
.material-icons.md-36{字体大小：36px；}
.material-icons.md-48{字体大小：48px；}
/*在浅色背景上使用黑色图标的规则*/
.material-icons.md-dark{color:rgba（0,0,0,0.54）；}
.material-icons.md-dark.md-inactive{color:rgba（0,0,0,0.26）；}
/*在深色背景上使用白色图标的规则*/
.material-icons.md-light{color:rgba（255，255，255，1）；}
.material-icons.md-light.md-inactive{color:rgba（255，255，255，0.3）；}

当前状态：{{已添加？'已添加'：'未添加'}
这里是另一种方法


var-app=angular.module（'app'，[]）；
应用程序控制器（'ctrl'，函数（$scope）{
$scope.add=false；
});
/*调整图标大小的规则*/
.material-icons.md-18{字体大小：18px；}
.material-icons.md-24{字体大小：24px；}
.material-icons.md-36{字体大小：36px；}
.material-icons.md-48{字体大小：48px；}
/*在浅色背景上使用黑色图标的规则*/
.material-icons.md-dark{color:rgba（0,0,0,0.54）；}
.material-icons.md-dark.md-inactive{color:rgba（0,0,0,0.26）；}
/*在深色背景上使用白色图标的规则*/
.material-icons.md-light{color:rgba（255，255，255，1）；}
.material-icons.md-light.md-inactive{color:rgba（255，255，255，0.3）；}

当前状态：{{已添加？'已添加'：'未添加'}
由于您使用的是angular，最简单的方法是使用
ng if
的
ng show
或
ng hide

ng if
将实际渲染/取消渲染按钮，而其他两个将使用css简单地显示和隐藏按钮。然后，您所要做的就是将它们设置为控制器中的一个值


添加
删除
因为您使用的是angular，最简单的方法是使用
ng if
的
ng show
或
ng hide

ng if
将实际渲染/取消渲染按钮，而其他两个将使用css简单地显示和隐藏按钮。然后，您所要做的就是将它们设置为控制器中的一个值


添加
删除
这更容易：

<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>


{（add==true）？'add'：'remove'}
这更容易：

<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>


{（add==true）？'add'：'remove'}
working fiddle创建一个布尔范围变量，例如
isAdd
；每次你点击其中一个buttons@Azola谢谢你的建议。我不熟悉angularjs.working fiddle创建布尔范围变量，例如
isAdd
；每次你点击其中一个buttons@Azola谢谢你的建议。我是安格拉斯的新手。