2

「エントリ内のエントリ」ごとに、ng-show を true に切り替え、エントリに関する詳細を表示するボタンがあります。現在、このコードはすべてのエントリを ng-show=true に切り替えます。各ボタンが配置されているエントリの詳細のみを切り替えるようにします。

私の見解：

<h1>Listing Projects</h1>
<ul class="unstyled">
    <li ng-repeat="entry in entries" ng-init="entryClass=isClass(entry.isProject)">
        <ul class="unstyled">
            <li>
                <div class="alert" ng-class="entryClass">
                    <h3>{{entry.title}}</h3>
                    <button ng-click="toggleShow()">Details</button>
                    <div style="background-color:#000000; min-width:100px; min-height:100px;" ng-show="showThis">
                    </div>
                </div>
            </li>
        </ul>
    </li>
</ul>

AngularJS:

app = angular.module("Resume", ["ngResource"])

app.factory "Entry", ["$resource", ($resource) ->
  $resource("/entries")
]

@EntryCtrl = ["$scope", "Entry", ($scope, Entry) ->
  $scope.entries = Entry.query()
  $scope.showThis = false

  $scope.isClass = (isProject) ->
    if isProject == true
      $scope.myVar = "project alert-info"
    else
      $scope.myVar = "tech alert-success"


  $scope.toggleShow = ->
    if $scope.showThis == false
      $scope.showThis = true
    else
      $scope.showThis = false
]
4

2 に答える 2

2

エントリを関数に渡します。

$scope.toggleShow = (entry) ->
    entry.showThis = !entry.showThis

<button ng-click="toggleShow(entry)">Details</button>
<div ng-show="entry.showThis">stuff here</div>

または、マークアップですべてを処理することもできます。

<button ng-click="entry.showThis = !entry.showThis">Details</button>
<div ng-show="entry.showThis">stuff here</div>

別$indexの方法として、別のオブジェクトを使用することもできます。

$scope.showEntry = {}

$scope.toggleShow = (index) ->
    $scope.showEntry[index] = !$scope.showEntry[index]

<button ng-click="toggleShow($index)">Details</button>
<div ng-show="showEntry[$index]">stuff here</div>

そのため、いくつかのオプションがあります。ハッピーコーディング。

于 2013-03-05T18:31:32.610 に答える
1

$scope.showThis 変数は、すべてのエントリの参照として機能します。したがって、1 つのエントリを変更すると、他のすべてのエントリも変更されます。

実際にはどこでもisClass使用していないため、関数もあまり機能していません。myVarその 'my​​Var' 変数は、あなたがng-class ドキュメントに従おうとしていたことを示していますが、残念ながらそれで少し軌道から外れてしまいました。

これはおそらく、HTML を次のようにしたいものです。

<h1>Listing Projects</h1>
<ul class="unstyled">
  <li ng-repeat="entry in entries">
    <ul class="unstyled">
      <li>
       <div class="alert" ng-class="{true: 'project alert-info', false: 'tech alert-success'}[entry.isProject]">
          <h3>{{entry.title}}</h3>
          <button ng-click="toggleShow($index)">Details</button>
          <div style="background-color:#000000; min-width:100px; min-height:100px;" ng-show="shouldShow($index)">
          </div>
        </div>
      </li>
    </ul>
  </li>
</ul>

これは、上記の HTML に対応するコントローラーです。

app.controller('AppController',
  [
    '$scope',
    function($scope) {
      $scope.entries = [
        {isProject: false, title: 'Entry1'}, 
        {isProject: true, title: 'Entry2'}
      ];
      var visible = [];

      $scope.toggleShow = function(index){
        position = visible.indexOf(index);
        if(position===-1) {
          visible.push(index);
          return;
        }
        visible.splice(position, 1);
      };

      $scope.shouldShow = function(index){
        return visible.indexOf(index) != -1;
      };

    }
  ]
);

プランカー

于 2013-03-05T18:46:07.677 に答える