Show or Hide Dom Element based on Ng-value

Question

I have a view of quotes rendered from Angular as a resource. I have part of the quote hidden but upon clicking the rest of the quote is shown. The problem I have is getting the body of the quote to toggle correctly.

I have it set up so in the angular controller the dom elements visibility is toggled on click between hidden and visible. My current code has a few bugs (it's late and I'm having brain farts)

My problem is I'm self learning and If I don't ask it takes me hours to figure these things out. My current ng-value sets ShowMe and if it == true, all of the other quote bodies are shown. Any assistance would be appreciated.

Basically what I'm trying to do again is have the quote body hidden on page load.
If a quote is click show the body of that quote.
If it is clicked again hide the body of that quote.

Angular

  app.controller("QuotesCtrl", ['$scope', '$http', 'Quotes', 'Quote', '$location',  function($scope, $http, Quotes, Quote, $location ) {
        $scope.quotes = Quotes.query();
        $scope.quote = Quote.query();

        $scope.switchQuote = function (id) {
            if(document.getElementById('quotebody' + id).style.visibility == 'hidden') {
             document.getElementById('quotebody' + id).style.visibility = 'visible' 
             $scope.showMe = true; 
            } else {
                document.getElementById('quotebody' + id).style.visibility = 'hidden'
                $scope.showMe = false; 
            }   
        }
    }
]);

html

<div class="quotes col-xs-10 col-md-8" ng-controller="QuotesCtrl">
      <div ng-repeat="quote in quotes">
        <a ng-click="switchQuote(quote.id)" ng-value="showMe">
          <span>Quote id: {{quote.id}}</span>
          <span>Name: {{quote.name}}</span>
          <span>Email: {{quote.email}}</span>
          <span>City: {{quote.city}}</span>
        </a>
        <div id="quotebody{{quote.id}}" ng-show="showMe">
          <span>City: {{quote}}</span>
          <span>City: {{quote.city}}</span>
          <span>City: {{quote.city}}</span>
        </div>
      </div>
    </div>

perhaps this is what you want https://docs.angularjs.org/api/ng/directive/ngIf — simon, Mar 11 '16 at 07:40
Or even better https://docs.angularjs.org/api/ng/directive/ngHide which provides the same functionality as your code (ngIf modifies the DOM) — fodma1, Mar 11 '16 at 07:42
I think you have mixed up [ngValue](https://docs.angularjs.org/api/ng/directive/ngValue) with [ngIf](https://docs.angularjs.org/api/ng/directive/ngIf)/[ngShow](https://docs.angularjs.org/api/ng/directive/ngShow). Take a look at:http://stackoverflow.com/questions/19177732/what-is-the-difference-between-ng-if-and-ng-show-ng-hide — Matt Lishman, Mar 11 '16 at 07:43

score 1 · Accepted Answer · answered Mar 11 '16 at 07:45

You use ng-show or ng-if for this. With the switchQuote function you will switch the value from true to false and vice versa.

Since you probably have a lot of quotes and they are in an ng-repeat, you should use the property (in my example, property "visible") on each quote object to show or hide the clicked quote.

Html:

<div class="quotes col-xs-10 col-md-8" ng-controller="QuotesCtrl">
  <div ng-repeat="quote in quotes">
    <a ng-click="switchQuote(quote)">
      <span>Quote id: {{quote.id}}</span>
      <span>Name: {{quote.name}}</span>
      <span>Email: {{quote.email}}</span>
      <span>City: {{quote.city}}</span>
    </a>
    <div ng-show="quote.visible">
      <span>City: {{quote}}</span>
      <span>City: {{quote.city}}</span>
      <span>City: {{quote.city}}</span>
    </div>
  </div>
</div>

Controller:

app.controller("QuotesCtrl", ['$scope', '$http', 'Quotes', 'Quote', '$location',  function($scope, $http, Quotes, Quote, $location ) {
    $scope.quotes = Quotes.query();
    $scope.quote = Quote.query();

    $scope.switchQuote = function (quote) {
        quote.visible = !quote.visible;
    }
}]);

Very thankful for your answer. I dont think I would have wrote clean code like this for a few weeks. It really is appreciated. — Merlin Jackson, Mar 11 '16 at 08:03

Show or Hide Dom Element based on Ng-value

1 Answers1