3

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

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

JSBin は次のとおりです。

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

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

4

3 に答える 3

8

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

<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>

于 2014-08-18T18:43:41.283 に答える
1

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

また、jquery が使用されていないことに注意してください。AngularJs コードでは jquery を使用しないことを強くお勧めします。
AngularJs には、メソッドによってアクセス可能なjQuery liteが含まれています。angular.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');
        }
    };

}]);
于 2015-04-22T10:35:46.060 に答える
0

ちょっとした 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>
...


に：

...
<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/

于 2014-11-25T22:53:33.213 に答える