Question

我想要显示数据时遇到问题。这里的示例是我的HTML和来自控制器的JS。

<div class="col-sm-4 text-center" ng-click="showDetails=! showDetails; showMe('belts')">
    <h1>Belts</h1>
</div>
<div class="col-sm-4 text-center" ng-click="showDetails=! showDetails; showMe('account')">
    <h1>Accounts</h1>
</div>
<div class="col-sm-4 text-center" ng-click="showDetails=! showDetails; showMe('lorem')">
    <h1>Lorem ipsum</h1>
</div>
<div class="row contactUs" ng-show="!showDetails">
    <div class="col-sm-4"></div>
    <div class="col-md-4 text-center">
        <h1>Didn't find what you were looking for?</h1>
        <p>Send us your question. We're here to help.</p>
        <div class="row">
            <!-- Some form go here -->
        </div>
    </div>
</div>
<div class="row showAboutUs" ng-show="showDetails">
    <div class="col-sm-12" ng-if="showBelts == true">
        <h2>Belts:</h2>
        <h2>Lorem ipsum dolor sit amet?</h2>
    </div>
    <div class="col-sm-12" ng-if="showAccount == true">
        <h2>Accounts:</h2>
        <h2>Lorem ipsum dolor sit amet?</h2>
    </div>
    <div class="col-sm-12" ng-if="showLorem == true">
        <h2>Lorem ipsum:</h2>
        <h2>Lorem ipsum dolor sit amet?</h2>
    </div>
</div>

$scope.showMe = function (item) { 
    $scope.showBelts == false; 
    $scope.showAccount == false; 
    $scope.showLorem == false; 
    if (item == 'belts') { 
        $scope.showBelts == true; 
        return $scope.showBelts; 
    } else if (item == 'account') { 
        $scope.showAccount == true;
        return $scope.showAccount; 
    } else if (item == 'lorem') { 
        $scope.showLorem == true; 
        return $scope.showLorem; 
    } 
}

当我点击某个元素时，showDetails必须为true，但它必须显示一些元素（带，帐号或lorem）。谢谢你的帮助！

Answer 1

试试这可能会对你有所帮助

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.name = 'Superhero';
    
    $scope.showMe = function(item){
       $scope.beltsShow=false;
       $scope.account=false;
       $scope.lorem=false;
       if (item=='belts'){
           $scope.beltsShow=true;
       }else if (item=='account'){
           $scope.account=true;
       }else if (item=='lorem'){
           $scope.lorem=true;
       }
    }
    
    $scope.showMe('');
}

h3 {margin:0px;}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div class="col-sm-4 text-center" ng-click="showMe('belts')">
   <h3>Belts</h3>
</div>
<div class="col-sm-4 text-center" ng-click="showMe('account')">
   <h3>Accounts</h3>
</div>
<div class="col-sm-4 text-center" ng-click="showMe('lorem')">
   <h3>Lorem ipsum</h3>
</div>
<div class="row">
   <div class="col-sm-4"></div>
   <div class="col-md-4 text-center">
      <h3>Didn't find what you were looking for?</h3>
      <p>Send us your question. We're here to help.</p>
      <div class="row">
         <!-- Some form go here -->
      </div>
   </div>
</div>
<div class="row">
   <div class="col-sm-12" ng-show="beltsShow">
      <h2>Belts:</h2>
      <h2>Lorem ipsum dolor sit amet?</h2>
   </div>
   <div class="col-sm-12" ng-show="account">
      <h2>Accounts:</h2>
      <h2>Lorem ipsum dolor sit amet?</h2>
   </div>
   <div class="col-sm-12" ng-show="lorem">
      <h2>Lorem ipsum:</h2>
      <h2>Lorem ipsum dolor sit amet?</h2>
   </div>
</div>

Answer 2

你可以简单地做

<强> JS

$scope.showMe = function (item) { 
   $scope.item = item;
}

<强> HTML

<div class="col-sm-12" ng-if="item == 'belts'">
    <h2>Belts:</h2>
    <h2>Lorem ipsum dolor sit amet?</h2>
</div>
<div class="col-sm-12" ng-if="item == 'account'">
    <h2>Accounts:</h2>
    <h2>Lorem ipsum dolor sit amet?</h2>
</div>
<div class="col-sm-12" ng-if="item == 'lorem'">
    <h2>Lorem ipsum:</h2>
    <h2>Lorem ipsum dolor sit amet?</h2>
</div>

在Angular中隐藏显示元素

2 个答案: