覆蓋NG隱藏NG點擊

上的努力學習angularjs，我創造了一套使用ng-repeatdiv S上的過程。總共有五個div。我只使用$first指令組件顯示第一個div。覆蓋NG隱藏NG點擊

<div class="container" ng-app="demoApp" ng-controller="demoController"> 
    <div class="row" ng-repeat="job in jobs" ng-hide="!$first"> 
    <div class="col-md-4"> 
     {{job}} 
    </div> 
    <div class="col-md-4"> 
     <button class="btn-primary btn-xs add" ng-click="showNext($event)" ng-hide="$last">Add</button> 
     <button class="btn-primary btn-xs delete" style="display: none;">Delete</button> 
    </div> 
    </div> 
</div>

這有效。現在

，每個div有兩個按鈕，添加和刪除。當我點擊添加我想隱藏當前行的添加按鈕和刪除按鈕並打開下一行。所以我寫了，

$scope.showNext = function(evt) { 
    var elm = evt.target; 
    $(elm).hide(); 
    $(elm).next().hide(); 
    $(elm).closest("div.row").next().slideDown(); 
};

這不是工作作爲ng-hide是壓倒我slideDown。做這件事的方式是什麼？

此外，我想只有在$last可見行& & !first刪除按鈕。如何在ng-repeat中查找最後一個可見行？

小提琴：https://jsfiddle.net/codeandcloud/u4penpxw/

來源

2016-01-26 naveen

我覺得更清潔的方式是將兩種方法（'showNext'，'hideThis'）移動到一個指令。 – Raulucco

你不應該操縱與事物的DOM一樣$(elm).hide();，你應該使用ng-class=讓那隱藏或顯示元素角添加類。如果要切換到ng-repeatng-repeat="job in jobs track by $index"，你可以寫類似的東西在你的showNext()功能全：

$scope.showNext = function(index) { 
     $scope.currentJob = $scope.jobs[index] 
}

，並調用它像ng-click="showNext($index) - 當然，你需要做一些重構爲好。但是，您可以編寫類似ng-class="{hidden: (job == currentJob}"的東西來隱藏除當前行以外的所有按鈕。

有很多的善念在這個問答&一個："Thinking in AngularJS" if I have a jQuery background?

來源

2016-01-26 10:52:43

我添加了一張草圖，告訴你如何將這個更接近角度的精神。 –

angularjs真的很棒。感謝http://jsfiddle.net/codeandcloud/p1u06h12/一噸 – naveen

是啊，該代碼看起來好多了，非常好！ –

覆蓋NG隱藏NG點擊

回答

相關問題