如何使用 AngularJS 显示按钮或锚标记值？答案

【问题标题】：How to display button or anchor tag value with AngularJS?如何使用 AngularJS 显示按钮或锚标记值？
【发布时间】：2016-09-10 19:41:25
【问题描述】：

我正在尝试根据我的角度变量返回的真或假来显示按钮或锚标记值。这是它的一个sn-p。

<a href="#" id="verify">{{userInformation.value}}</a>

userInformation.value 返回真/假。现在我想要的是根据角度返回的内容显示按钮元素的特定值。

类似：

<a href="#" id="verify">{{userInformation.value === true ? displaysomething : displaysomethingelse}}</a>

任何建议都会有很大帮助。

【问题讨论】：

你可以使用ng-if
显示的代码有什么问题？可以在角度表达式中使用三元数
它不工作，没有任何返回
其他问题是错误的，因为我为它创建了一个 jsfiddle 并且它正在工作。
不，我试过了，似乎不适合我

标签： javascript html angularjs

【解决方案1】：

你可以试试这个

<a href="#" id="verify">{{userInformation.value ? 'Hello': 'Hi'}}</a>

【讨论】：

【解决方案2】：

考虑在控制器中创建一个函数来决定为您显示什么，而不是执行 ng-if。这将允许您将业务逻辑保留在控制器中和模板之外，并且您可以进行单元测试（这通常是一个好主意）。此外，它会为不止两个价值条件开放（例如，如果您必须检查的不仅仅是真/假）。此处示例：

angular.module('myApp', [])

.controller('MainController', function() {

  // initial user info object
  this.userInformation = {
    value: true
  };


  // swap values for demo purpose
  this.swapValue = function(obj) {
    obj.value = !obj.value;
  };

  // logic for display lives here
  this.getUserInfoDisplay = function(userInfo) {
    if (userInfo.value) {
      return 'Display something';
    } else {
      return 'Display something else';
    }
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<!-- Controller as syntax -->
<div ng-app="myApp" ng-controller="MainController as ctrl">
  <a href="#">{{ctrl.getUserInfoDisplay(ctrl.userInformation)}}</a>
  <br />
  <button ng-click="ctrl.swapValue(ctrl.userInformation)">
    Swap Value
  </button>
</div>

【讨论】：

我试图仅根据变量返回的内容而不是单击它来显示这些内容。我不想点击它来将值更改为真/假。
该按钮只是为了显示如何从控制器方法驱动更改值。显然，您的数据将设置在别处。