要素を表示し、ng-repeat内の他の要素を非表示にします

名前のリストを表示しようとしています。名前をクリックするとその名前の国が表示され、他の名前をクリックすると前の名前が隠されますクリック一つだけ、 iは、コントローラで宣言された変数でNG-ショーを使用しますが、それだけで他人を隠すことなく、私はそれをクリックし、各項目を示しておく、これは私のコードで示しています要素を表示し、ng-repeat内の他の要素を非表示にします

<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<body ng-app="myApp"> 
<div ng-controller="myCtrl"> 
<div ng-repeat="x in records"> 
    <a href="#" ng-click="showDesc = true">{{x.Name}}</a> 
    <div ng-show="showDesc">{{x.Country}}</div> 
</div> 
</div> 
<script> 
    var app = angular.module("myApp", []); 
    app.controller("myCtrl", function($scope) { 
    $scope.showDesc = false; 
     $scope.records = [ 
     { 
      "Name" : "Alfreds Futterkiste", 
      "Country" : "Germany" 
     }, 
     { 
      "Name" : "Berglunds snabbköp", 
      "Country" : "Sweden" 
     }, 
     { 
      "Name" : "Centro comercial Moctezuma", 
      "Country" : "Mexico" 
     }, 
     { 
      "Name" : "Ernst Handel", 
      "Country" : "Austria" 
     } 
     ] 
    }); 
</script> 
</body> 
</html>

出典

2016-10-29 ahmdabos

にコードを変更します。したがって、showDescを設定すると、$ scope.showDesc（リピータのすべてのレコードに適用されます）が設定されます。 – thsorens

@thsorensが間違っています。私の答えを読んでください。 –

NG-繰り返しましたそれ自身の範囲。したがって、showDesc = trueは、ng-repeatスコープのshowDescフィールドを初期化します。各項目には独自のshowDescがあります。

すべてのアイテムに共通のグローバルフラグが必要です。そしてそれはただの旗ではありません：あなたはを知る必要があります。アイテムを展開する必要があります。

だからあなたshowDescはあなたのリストの各要素にバインドされていない、単に一般的な特性である

$scope.expandedRecord = null; 
$scope.expand = function(record) { 
    $scope.expandedRecord = record; 
}

と

<div ng-repeat="x in records"> 
    <a href="#" ng-click="expand(x)">{{x.Name}}</a> 
    <div ng-show="expandedRecord === x">{{x.Country}}</div> 
</div>

出典

2016-10-29 08:55:45

ありがとうございます – ahmdabos

要素を表示し、ng-repeat内の他の要素を非表示にします

答えて

関連する問題