javascript - AngularJS 为所有条目切换 ngShow

Question

对于每个“条目中的条目”，我都有一个按钮将 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
]

Answer 1

将条目传递给您的函数:

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

所以有几个选项供您选择。快乐编码。