angularjs中的ng-show在跨度上不起作用答案

【问题标题】：ng-show in angularjs not working on spanangularjs中的ng-show在跨度上不起作用
【发布时间】：2017-01-11 21:01:15
【问题描述】：

我在 Angularjs 中遇到了 ng-show 的问题。我有一个文本框，用户可以在其中输入服务器的主机名。输入此信息后，服务器的主机名将发送到后端系统，该系统验证服务器是否存在。我目前正在使用 bootstrap、font awesome 和 angularjs 在我的文本框中显示一个加载图标。当我收到来自服务器的响应时，我将 isLoaded 变量更改为 true，并且我希望加载图标停止显示。但是，这不会发生。无论图标最初设置为何种状态，之后都不会改变。

这是我的问题的简化版本。 Plunker Link Here

HTML

<form>
        <div class="form-group has-feedback">
          <label for="server">Server:</label>
          <input type="text" id="server" class="form-control" placeholder="server host name">
          <span ng-show="{{testVm.state}}" class="fa fa-spinner fa-spin form-control-feedback" aria-hidden="true"></span>          
          <button class="btn btn-primary" ng-click="testVm.turnOn()">Activate</button>
          <button class="btn btn-primary" ng-click="testVm.turnOff()">Deactivate</button>
        </div>
      </form>

角度代码：

angular
  .module('test',[])
  .controller('TestController',TestController);
function TestController() {
  var testVm = this;
  testVm.turnOn = turnOn;
  testVm.turnOff = turnOff;
  testVm.state = false;
  function turnOn() {
    testVm.state = true;
  }
  function turnOff() {
    testVm.state = false;
  }

感谢任何帮助。谢谢。

【问题讨论】：

您需要将ng-show 用作ng-show="myVar"，不带大括号。检查你的 chrome 控制台，它一定已经报错了！

标签： javascript angularjs twitter-bootstrap font-awesome angularjs-ng-show

【解决方案1】：

您以错误的方式使用ng-show。您不需要双花括号，因为您没有评估变量的字符串值。

<span ng-show="testVm.state" class="fa fa-spinner fa-spin form-control-feedback" aria-hidden="true"></span>

Fixed plunker

【讨论】：

这很容易解决。谢谢！