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.show此变量用作所有条目的参考。因此，当您为一个条目更改它时，所有其他条目也会更改。

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

AngularJS切换显示所有条目

2 个答案: