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

How to display button or anchor tag value with AngularJS?

本文关键字：按钮 何使用 AngularJS 显示      更新时间：2023-09-26

我正试图根据角度变量返回的true或false来显示按钮或锚点标记值。这是它的一个片段。

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

userInformation.value返回true/false。现在，我想要的是根据角度返回的值来显示按钮元素的特定值。

类似于：

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

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

你可以试试这个

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

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

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>

相关文章：