Angular：當多個div具有相同的類時，更改單個div的類的最佳做法是什麼？

我是相當新的角。我想要的是當單擊按鈕時替換div的類。使用「ng-class」可以更改頁面上所有具有該類的div的類，我只想選擇一個要替換的類。Angular：當多個div具有相同的類時，更改單個div的類的最佳做法是什麼？

這jsfiddle演示了我想要做的。我試圖使用jQuery，但正如你可以看到它在這種情況下不起作用。我的猜測是有一個更「角度」的方式來做到這一點。有什麼建議麼？

這裏是在的jsfiddle代碼：

<div ng-controller="MyCtrl"> 
<div class="test1"> 
    Text1 
</div> 
<div class="test1"> 
    Text2 
</div> 
<button ng-click="click($event)">Click</button> 
</div> 

var myApp = angular.module('myApp', []); 

function MyCtrl($scope) { 

    $scope.click = function (e) { 
     var source = e.target || e.srcElement; 
     var div = source.prev("div.test1:first"); 
     div.toggleClass('test1'); 
    }; 
} 

.test1 { 
    color: blue; 
}

來源

2013-03-05 Geoff

ud喜歡選擇一個......哪一個？ – PlantTheIdea 2013-03-05 15:24:27

在這個例子中，我想選擇它上面的第一個。但是，如果您單擊小提琴中的按鈕，它會將此錯誤記錄到控制檯：「TypeError：Object＃沒有方法'prev'。」我也不相信jQuery是最好的方法。 – Geoff 2013-03-05 15:27:48

良好的角度本身使用jQuery的精簡版本，所以如果你想使用像.prev（）這樣的東西，你可能還需要引入標準的jQuery庫。 – PlantTheIdea 2013-03-05 15:32:33

是的，你正試圖接近它在相當非AngularJS的方式。使用AngularJS，您需要關注模型操作，裝飾性地描述UI，並讓AngularJS找出其餘部分。

接近那問題就沿着這些線路的東西的一種方式：

function MyCtrl($scope) { 

    $scope.selected = true; 

    $scope.click = function() { 
     $scope.selected = false; 
    }; 
}

和HTML：

<div ng-controller="MyCtrl"> 
    <div ng-class="{test1: selected}"> 
     Text1 
    </div> 
    <div class="test1"> 
     Text2 
    </div> 
    <button ng-click="click()">Click</button> 
</div>

工作的jsfiddle這裏：http://jsfiddle.net/CqHDn/但這是真的做的事情只有一個辦法。這裏的關鍵問題是：第一個div（功能上講）的特殊之處在於你想要翻轉它的類別？您應該可以在您的模型中表示功能概念。

至於jQuery的結果：我真的建議在學習AngularJS時完全放棄它。我不是唯一一個：https://stackoverflow.com/a/15012542/1418796

來源

2013-03-05 15:38:11

偉大的答案，很好的參考。 – PlantTheIdea 2013-03-05 15:43:19

謝謝，非常有幫助。我同意jQuery ..它感覺不對，但我正在刺傷。我真正想要的簡單功能是在點擊相應的按鈕時展開/摺疊屏幕上的特定div。由於div的類是在頁面上重複的，我想找到一種方法來更改被點擊的方法。我已經更新了我的jsFiddle以更加密切地反映這一點。 – Geoff 2013-03-05 15:51:36

@Geoff，這聽起來像你想要的：http://angular-ui.github.com/bootstrap/#/collapse – 2013-03-05 15:59:28

Angular：當多個div具有相同的類時，更改單個div的類的最佳做法是什麼？

回答

相關問題