3

I'm facing a problem with ng-show in Angularjs. I have a textbox where a user can enter the host name of a server. On entering this information, the hostname of the server gets sent to the backend system which verifies if the server exists or not. I am currently displaying a loading icon in my textbox using bootstrap, font awesome and angularjs. When I receive a response from the server, I change the isLoaded variable to true and I expect the loading icon to stop showing. However, this does not happen. Whatever state the icon is first set to, it never changes after that.

Here's the simplified version of my problem. 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 Code:

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

Any help is appreciated. Thanks.

Ravi Teja Kumar Isetty
  • 1,559
  • 4
  • 21
  • 39
Pravin Umamaheswaran
  • 704
  • 1
  • 7
  • 17
  • You need to use `ng-show` as `ng-show="myVar"`, without the curly brackets. Check your chrome console, it must be already throwing an error! – Sayed Sep 04 '16 at 08:51

1 Answers1

3

You are using ng-show the wrong way. You don't need the double curly braces, because you're not evaluating the string value of the variable.

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

Fixed plunker

Yaron Schwimmer
  • 5,327
  • 5
  • 36
  • 59