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>

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

Answer 2

您的 $scope.showThis 变量可作为您所有条目的参考。因此，当您为一个条目更改它时，所有其他条目也会更改。

您的isClass 函数也没有做太多，因为您实际上并没有在任何地方使用myVar。那个 'myVar' 变量告诉我你正在尝试关注ng-class docs，但我担心你会偏离轨道。

这可能是您希望 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;
      };

    }
  ]
);

Plunker