Question

我有一个从Angular呈现为资源的引用视图。我隐藏了一部分报价，但点击了报价的其余部分。我遇到的问题是让报价正文切换正确。

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

我的问题是我自学，如果我不问，我需要花费数小时来解决这些问题。我当前的ng值设置ShowMe，如果它== true，则显示所有其他引用主体。任何帮助将不胜感激。

基本上我要再做的就是隐藏引号体在页面加载。
如果点击报价则显示该报价的正文。
如果再次点击它，请隐藏该引文的正文。

角

  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中，因此您应该在每个引用对象上使用该属性（在我的示例中，属性为“visible”）来显示或隐藏单击的引用。

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

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

1 个答案: