AngularJS切换显示所有条目

对于每个'条目中的条目'，我有一个按钮，将ng-show切换为true并显示有关条目的详细信息。目前，此代码切换到ng-show = true的每个条目。我希望每个按钮，仅切换的细节它定位于入门AngularJS切换显示所有条目

我的观点：。

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

来源

2013-03-05 Brian Petro

入门传递给你的函数：

$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-05 18:31:32

感谢您的帮助。我选择了第二个选项，因为它需要的代码量最少。也许你可以帮我解决另一个角度问题。谢谢！ http://stackoverflow.com/questions/15227715/angularjs-multiple-draggable-items-causes-jump-on-initial-move – 2013-03-06 10:56:53

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

来源

2013-03-05 18:46:07 Stewie

AngularJS切换显示所有条目

回答

相关问题