web-dev-qa-db-ja.com

AngularJSng-複数の要素を持つ1つの条件を表示

「showMe」ブール値を使用してng-clickで3つのdivがあります。彼らの段落には、「showMe」を評価するng-showがあります。

私の質問は、1つの条件を使用して、クリックしたdivに段落を表示するにはどうすればよいですか？つまり、最初のdivをクリックすると、「1」のみが表示され、「2」と「3」の段落は非表示のままになります。 ng-repeatは、この演習のオプションではありません。

これがJSBinです：

http://jsbin.com/kiwicipabago/1/edit

ありがとうございました。

javascriptangularjsangularjs-ng-clickng-show
3
Ryan

あなたはこのようにすることができます：

<div ng-app="app">
<div ng-controller="AppCtrl">
  <div class="box" ng-click="showMe = 1">
    <p ng-show="showMe ==1">1</p>
  </div>
  <div class="box" ng-click="showMe = 2">
    <p ng-show="showMe==2">2</p>
  </div>
  <div class="box" ng-click="showMe = 3">
    <p ng-show="showMe ==3">3</p>
  </div>
</div>
7
Vijay

すべての例はこの js fiddle にあり、もう少し詳しく説明されています。

また、jqueryは使用されていないことに注意してください、AngularJsコードでjqueryを使用しないことを強くお勧めします。
AngularJsには jQuery liteangular.element 方法。十分な機能が提供されない場合は、DOM操作に使用する必要があります。次に、ディレクティブの作成を検討してください。

詳細については、このコントローラーを参照してください。

app.controller("AppCtrl", ['$scope', function ($scope) {

    $scope.show_me = function (event) {
        var box = event.target.parentElement;
        var article = angular.element(box).find('article');
        var articles = angular.element(box.parentElement).find('article');
        // if already shown, hide it
        if (article.hasClass('show'))
            article.removeClass('show')
        else // elsif not shown, hide all and show it
        {
            articles.removeClass('show');
            article.addClass('show');
        }
    };

}]);
1
Micka

小さなjQueryの助けを借りて使用できる別のソリューションは次のとおりです。

showMeという関数をコントローラーに追加します。

var app = angular.module("app", []);

  app.controller("AppCtrl", function($scope) {

  $scope.showMe = function(event) {
    $(event.target).find('p').toggle();
  };
});


そして、HTMLで、次のを次のように変更します：

...
<div ng-controller="AppCtrl">
  <div class="box" ng-click="showMe = !showMe">
    <p ng-show="showMe">1</p>
  </div>
</div>
...


to：

...
<div ng-controller="AppCtrl">
  <div class="box" ng-click="showMe($event)">
    <p>1</p>
  </div>
</div>
...


デフォルトでp要素を非表示にする場合は、CSSを少し追加するだけです。

.box p {
  display: none;
}


JSBin： http://jsbin.com/fegevoyoda/2/

0
DondeEstaMiCulo