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

您的isClass功能也没有做太多，因为您实际上并没有在myVar任何地方使用。那个“myVar”变量告诉我你正在尝试遵循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 回答