根据 Ng 值显示或隐藏 Dom 元素

Question

我看到了从 Angular 作为资源呈现的引号。我隐藏了部分报价，但单击后会显示报价的其余部分。我遇到的问题是让引用的正文正确切换。

我已经设置好了，所以在角度控制器中，dom 元素的可见性在点击时在隐藏和可见之间切换。我当前的代码有一些错误（已经很晚了，我脑子里放了屁）

我的问题是我正在自学，如果我不问，我需要几个小时才能弄清楚这些事情。我当前的 ng-value 设置 ShowMe，如果它 == true，则显示所有其他引用正文。任何帮助将不胜感激。

1. 基本上我要再次尝试隐藏引用正文 在页面加载。
2. 如果引用的是单击显示该引用的正文。
3. 如果再次单击它，则隐藏该引用的正文。

角度

  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>

Answer 1

为此，您使用 ng-show 或 ng-if。使用 switchQuote 函数，您可以将值从 true 切换为 false，反之亦然。

由于您可能有很多引号并且它们在 ng-repeat 中，因此您应该使用每个引号对象上的属性（在我的示例中，属性“可见”）来显示或隐藏单击的引号。

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>

控制器：

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