如果另一個DOM可見，我將如何顯示一個項目？

Question

我只是將ng模型添加到可見/不可見DOM，然後ng-show =「thatElement.visiblity ==='true'」？

<span>Show this text when the div is visible</span> 
<div ng-repeat="user in users" ng-show="user.section===radio.model">{{user.name}}</div> 

更新：如果我在div顯示時顯示此文本，它將重複用戶中的每個用戶。

Answer 1

您需要重新調整它：

<div ng-repeat="user in users" ng-show="user.section===radio.model"> 
    <span>Show this text when the div is visible</span> 
    <div>{{user.name}}</div> 
</div> 

或者，（因爲它是不明確的），如果你想div來顯示所有的時間，當條件滿足只跨越，你可以這樣做：

<div ng-repeat="user in users"> 
    <span ng-show="user.section===radio.model">Show this text when the div is visible</span> 
    <div>{{user.name}}</div> 
</div> 

---

你也可以使用一個過濾器，將整理出的是進入NG重複這樣就可以避免不必要的處理像子對象的對象。

---

下面是關於跨距使用ng-if一個簡單的例子：使用布爾值來表示是否顯示一個單跨

angular.module('app', []) 
 
    .controller('ctrl', function($scope) { 
 
    $scope.users = [{ 
 
     name: 'Mr. Visible', 
 
     visibility: true 
 
    }, { 
 
     name: 'Mr. Invisible', 
 
     visibility: false 
 
    }] 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
    <div ng-repeat="user in users"> 
 
    <span ng-if="user.visibility">Show this text when the div is visible</span> 
 
    <div>{{user.name}}</div> 
 
    <br /> 
 
    </div> 
 
</div>

---

UPDATE

實施例：

angular.module('app', []) 
 
    .controller('ctrl', function($scope) { 
 
    $scope.users = [{ 
 
     name: 'Mr. Visible', 
 
     visibility: true 
 
    }, { 
 
     name: 'Mr. Invisible', 
 
     visibility: false 
 
    }]; 
 

 
    $scope.showSpan = false; 
 
    for (var i in $scope.users) { 
 
     if ($scope.users[i].visibility) { 
 
     $scope.showSpan = true; 
 
     break; 
 
     } 
 
    } 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
    <span ng-show="showSpan">Show this text when the div is visible</span> 
 
    <div ng-repeat="user in users"> 
 
    <div>{{user.name}}</div> 
 
    <br /> 
 
    </div> 
 
</div>