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切換顯示所有條目

回答

相關問題