Ng-repeat和Ng-顯示角度

我想只顯示ng-repeat中的第一個元素，並通過單擊顯示其餘元素。Ng-repeat和Ng-顯示角度

這是我的嘗試沒有成功做到：

<button data-ng-click="term = !term">Show rest</button> 

    <div data-ng-repeat="y in mQues track by $index" data-ng-show="term" data-ng-init="term = $first"> 
    ... 
    </div>

它真的只顯示第一，但按一下按鈕做注意到出於某種原因...

來源

2016-02-16 user11001

更改您的納米顯示條件：data-ng-show="term || $first"

來源

2016-02-16 12:09:02 IsraGab

Tahnks，但沒有作品... – user11001

@ user11001，嘗試'$ first'代替'$指數== 1'，因爲索引開始從'0' – Grundy

@Grundy是正確的，對不起。或'$ index == 0' – IsraGab

<div data-ng-repeat="y in mQues track by $index" data-ng-if="$first"></div>

我認爲這將有助於

來源

2016-02-16 12:08:40

使用角度filter limitTo它是相當直接的。

function MyCtrl($scope) { 
 
    $scope.items = [ 
 
    { title: "item 1" }, 
 
    { title: "item 2" }, 
 
    { title: "item 3" }, 
 
    { title: "item 4" } 
 
    ] 
 
    $scope.limit = 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app ng-controller="MyCtrl"> 
 
<span ng-click="limit = limit == 1 ? items.length : 1">Toggle</span> 
 
    <ul> 
 
    <li ng-repeat="item in items | limitTo:limit" ng-bind="item.title"></li> 
 
    </ul> 
 
</div>

來源

2016-02-16 12:10:26 brod

爲什麼我應該優先考慮限制？ – IsraGab

我不能使用這個，因爲ng-repeat是嵌套的，所以我不能在一個控制器變量中使用 – user11001

我不確定嵌套ng-repeat如何影響這個解決方案，請問您能否提供更多的代碼/上下文？ – brod

https://docs.angularjs.org/api/ng/directive/ngShow

ng-show顯示通過評估所賦予的表達的元件。

根據結果是'真的'還是'虛假的'，將分配給ng-show的表達式轉換爲true或false。當您將term指定爲真值時，ng-show被賦予true。

當你點擊按鈕，它計算term = !term和term然後變成false，因此整個div將被隱藏

來源

2016-02-16 12:13:11

試試這個...

<div data-ng-repeat="item in items" data-ng-show="term || $index == 0">{{item.title}}</div>

來源

2016-02-16 12:26:58 Banik

猜測更簡單，更直截了當：

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

app.controller('DisplayController', function($scope) { 
    $scope.ShowRest = 0; 
    $scope.items = [{ 
    title: 'myTitle1' 
    }, { 
    title: 'myTitle2' 
    }, { 
    title: 'myTitle3' 
    }, { 
    title: 'myTitle4' 
    }, { 
    title: 'myTitle5' 
    }]; 
}); 

app.$inject = ['$scope'];

Then：

<div data-ng-controller="DisplayController"> 
    <div data-ng-repeat="item in items"> 
    <div data-ng-class="{'no-display': !$first}">{{ item.title }}</div> 
    </div> 
    <div data-ng-repeat="item in items" data-ng-show="ShowRest"> 
    <div data-ng-class="{'no-display': $first}">{{ item.title }}</div> 
    </div> 
    <button data- ng-click="ShowRest = !ShowRest">Show rest</button> 
</div>

也許這不是最有效的方式，但它的工作原理！小提琴：http://jsfiddle.net/cb6pggL8/1/

來源

2016-02-16 12:27:57

Ng-repeat和Ng-顯示角度

回答

相關問題