亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Verzeichnis suchen
AngularJS API Reference auto auto/service auto/service/$injector auto/service/$provide ng ng/directive ng/directive/a ng/directive/form ng/directive/input ng/directive/input[checkbox] ng/directive/input[date] ng/directive/input[dateTimeLocal] ng/directive/input[email] ng/directive/input[month] ng/directive/input[number] ng/directive/input[radio] ng/directive/input[text] ng/directive/input[time] ng/directive/input[url] ng/directive/input[week] ng/directive/ngApp ng/directive/ngBind ng/directive/ngBindHtml ng/directive/ngBindTemplate ng/directive/ngBlur ng/directive/ngChange ng/directive/ngChecked ng/directive/ngClass ng/directive/ngClassEven ng/directive/ngClassOdd ng/directive/ngClick ng/directive/ngCloak ng/directive/ngController ng/directive/ngCopy ng/directive/ngCsp ng/directive/ngCut ng/directive/ngDblclick ng/directive/ngDisabled ng/directive/ngFocus ng/directive/ngForm ng/directive/ngHide ng/directive/ngHref ng/directive/ngIf ng/directive/ngInclude ng/directive/ngInit ng/directive/ngKeydown ng/directive/ngKeypress ng/directive/ngKeyup ng/directive/ngList ng/directive/ngModel ng/directive/ngModelOptions ng/directive/ngMousedown ng/directive/ngMouseenter ng/directive/ngMouseleave ng/directive/ngMousemove ng/directive/ngMouseover ng/directive/ngMouseup ng/directive/ngNonBindable ng/directive/ngOpen ng/directive/ngPaste ng/directive/ngPluralize ng/directive/ngReadonly ng/directive/ngRepeat ng/directive/ngSelected ng/directive/ngShow ng/directive/ngSrc ng/directive/ngSrcset ng/directive/ngStyle ng/directive/ngSubmit ng/directive/ngSwitch ng/directive/ngTransclude ng/directive/ngValue ng/directive/script ng/directive/select ng/directive/textarea ng/filter ng/filter/currency ng/filter/date ng/filter/filter ng/filter/json ng/filter/limitTo ng/filter/lowercase ng/filter/number ng/filter/orderBy ng/filter/uppercase ng/function ng/function/angular.bind ng/function/angular.bootstrap ng/function/angular.copy ng/function/angular.element ng/function/angular.equals ng/function/angular.extend ng/function/angular.forEach ng/function/angular.fromJson ng/function/angular.identity ng/function/angular.injector ng/function/angular.isArray ng/function/angular.isDate ng/function/angular.isDefined ng/function/angular.isElement ng/function/angular.isFunction ng/function/angular.isNumber ng/function/angular.isObject ng/function/angular.isString ng/function/angular.isUndefined ng/function/angular.lowercase ng/function/angular.module ng/function/angular.noop ng/function/angular.toJson ng/function/angular.uppercase ng/object ng/object/angular.version ng/provider ng/provider/$animateProvider ng/provider/$compileProvider ng/provider/$controllerProvider ng/provider/$filterProvider ng/provider/$httpProvider ng/provider/$interpolateProvider ng/provider/$locationProvider ng/provider/$logProvider ng/provider/$parseProvider ng/provider/$rootScopeProvider ng/provider/$sceDelegateProvider ng/provider/$sceProvider ng/service ng/service/$anchorScroll ng/service/$animate ng/service/$cacheFactory ng/service/$compile ng/service/$controller ng/service/$document ng/service/$exceptionHandler ng/service/$filter ng/service/$http ng/service/$httpBackend ng/service/$interpolate ng/service/$interval ng/service/$locale ng/service/$location ng/service/$log ng/service/$parse ng/service/$q ng/service/$rootElement ng/service/$rootScope ng/service/$sce ng/service/$sceDelegate ng/service/$templateCache ng/service/$timeout ng/service/$window ng/type ng/type/$cacheFactory.Cache ng/type/$compile.directive.Attributes ng/type/$rootScope.Scope ng/type/angular.Module ng/type/form.FormController ng/type/ngModel.NgModelController ngAnimate ngAnimate/provider ngAnimate/provider/$animateProvider ngAnimate/service ngAnimate/service/$animate ngCookies ngCookies/service ngCookies/service/$cookies ngCookies/service/$cookieStore ngMessages ngMessages/directive ngMessages/directive/ngMessage ngMessages/directive/ngMessages ngMock ngMock/function ngMock/function/angular.mock.dump ngMock/function/angular.mock.inject ngMock/function/angular.mock.module ngMock/object ngMock/object/angular.mock ngMock/provider ngMock/provider/$exceptionHandlerProvider ngMock/service ngMock/service/$exceptionHandler ngMock/service/$httpBackend ngMock/service/$interval ngMock/service/$log ngMock/service/$timeout ngMock/type ngMock/type/angular.mock.TzDate ngMockE2E ngMockE2E/service ngMockE2E/service/$httpBackend ngResource ngResource/service ngResource/service/$resource ngRoute ngRoute/directive ngRoute/directive/ngView ngRoute/provider ngRoute/provider/$routeProvider ngRoute/service ngRoute/service/$route ngRoute/service/$routeParams ngSanitize ngSanitize/filter ngSanitize/filter/linky ngSanitize/service ngSanitize/service/$sanitize ngTouch ngTouch/directive ngTouch/directive/ngClick ngTouch/directive/ngSwipeLeft ngTouch/directive/ngSwipeRight ngTouch/service ngTouch/service/$swipe
Figuren

AngularJS: API: ng/directive/ngRepeat

ngRepeat

  1. - directive in module ng

ngRepeat指令為集合中的每項實例化一個模板。每個模板的實例擁有自己的域，使用循環(huán)變量指向當(dāng)前集合項上，$index指向當(dāng)前項的索引或鍵值。

特殊屬性應(yīng)用于每個模板實例的本地域上，包括：

變量 類型 詳述
$index number 重復(fù)元素的迭代偏移值(0..length-1)
$first boolean 如果是重復(fù)元素的第一個迭代項則為true
$middle boolean 如果是在重復(fù)元素的第一個和最后一個之間的迭代項則為true
$last boolean 如果是重復(fù)元素的最后一個迭代項則為true
$even boolean 如果迭代項的位置$index是偶數(shù)則為true(其它為false)
$odd boolean 如果迭代項的位置$index為奇數(shù)則為true(其它為false)

這些也可以用ngInit創(chuàng)建別名。這在實例化嵌套ngRepeats時很有用。

指定重復(fù)的開始和結(jié)束點(diǎn)

為了解決重復(fù)元素序列只有一個父元素的情況，ngRepeat (不同于其它ng指令)支持?jǐn)U展重復(fù)范圍，通過使用ng-repeat-start 和 ng-repeat-end分別定義明確的開始和結(jié)束點(diǎn)。ng-repeat-start 指令工作方法類似ng-repeat，但是會重復(fù)從標(biāo)簽定義本身位置開始到ng-repeat-end定義位置之間的所有HTML代碼。

這個例子演示了它的使用場景：

  <header ng-repeat-start="item in items">
    Header {{ item }}
  </header>
  <div class="body">
    Body {{ item }}
  </div>
  <footer ng-repeat-end>
    Footer {{ item }}
  </footer>

如果上面例子中的items變量的值為['A','B']，則輸出結(jié)果為：

  <header>
    Header A
  </header>
  <div class="body">
    Body A
  </div>
  <footer>
    Footer A
  </footer>
  <header>
    Header B
  </header>
  <div class="body">
    Body B
  </div>
  <footer>
    Footer B
  </footer>

為 ngRepeat指定開始和結(jié)束點(diǎn)也支持AngularJS中的所有其它HTML指令語法(例如data-ng-repeat-start, x-ng-repeat-start 和 ng:repeat-start)。

指令信息

  • 這個指令會創(chuàng)建新的作用域(scope)。
  • 這個指令執(zhí)行優(yōu)先級為1000.

用法

  • 作為屬性使用: 
    <ANY
  ng-repeat="">
...
</ANY>

動畫

.enter - 當(dāng)一個新的項添加到列表或條目經(jīng)過過濾顯示時

.leave - 當(dāng)一個項從列表中刪除或當(dāng)一個項被過濾掉時

.move - 當(dāng)相鄰的一個項被過濾掉引起重新排序，或當(dāng)條目內(nèi)容進(jìn)行重新排序時

點(diǎn)擊這里 了解更多關(guān)于涉及動畫的步驟。

參數(shù)

參數(shù) 類型 詳述
ngRepeat repeat_expression

決定如果枚舉集合的表達(dá)式。當(dāng)前支持的格式有：

  • variable in expression – variable是用戶定義的循環(huán)變量， expression是用于枚舉集合的域表達(dá)式。

    例如: album in artist.albums.

  • (key, value) in expression – key 和 value 可以是任何用戶定義的標(biāo)識， expression是用于枚舉集合的域表達(dá)式。

    例如: (name, age) in {'adam':10, 'amalie':12}.

  • variable in expression track by tracking_expression – 您也可以提供一個可選的跟蹤函數(shù)，用來關(guān)聯(lián)到DOM元素集合中的對象。如果沒有給出跟蹤函數(shù)，ng-repeat使用標(biāo)識來關(guān)聯(lián)集合中的元素。對于解決相同鍵，它會比使用一個跟蹤函數(shù)產(chǎn)生更多錯誤。(意思是會有兩個不同對象映射到相同的DOM元素，也許不會。) 表達(dá)式可以使用過濾器，它會在調(diào)用跟蹤函數(shù)前生效。

    例如: item in items 等同于 item in items track by $id(item). 這意味著，DOM元素會關(guān)聯(lián)到數(shù)組中的條目標(biāo)識上。

    例如: item in items track by $id(item). 內(nèi)建的$id()函數(shù)能夠用于為數(shù)組內(nèi)的條目分配一個唯一的$$hashKey屬性。這個屬性用于作為數(shù)組中的條目標(biāo)識關(guān)聯(lián)到DOM元素的鍵值。移動數(shù)組中的同一個對象同樣會在DOM中移動DOM元素。

    例如: item in items track by item.id 是當(dāng)items來自數(shù)據(jù)庫時的典型模式。在這種情況下，對象的標(biāo)識不會有問題。兩個對象被認(rèn)為是相等的，只要他們的 id屬性是一樣的。

    例如: item in items | Filter:searchText track by item.id 是對條目同時使用過濾器和跟蹤表達(dá)式的模式。

示例

這個例子在域中初始化一個名字列表，并使用ngRepeat顯示每個人：

index.html
<div ng-init="friends = [
  {name:'John', age:25, gender:'boy'},
  {name:'Jessie', age:30, gender:'girl'},
  {name:'Johanna', age:28, gender:'girl'},
  {name:'Joy', age:15, gender:'girl'},
  {name:'Mary', age:28, gender:'girl'},
  {name:'Peter', age:95, gender:'boy'},
  {name:'Sebastian', age:50, gender:'boy'},
  {name:'Erika', age:27, gender:'girl'},
  {name:'Patrick', age:40, gender:'boy'},
  {name:'Samantha', age:60, gender:'girl'}
]">
  I have {{friends.length}} friends. They are:
  <input Type="search" ng-model="q" placeholder="filter friends..." />
  <ul class="example-animate-container">
    <li class="animate-repeat" ng-repeat="friend in friends | filter:q">
      [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
    </li>
  </ul>
</div>
animations.css
.示例:-animate-container {
  background:white;
  border:1px solid black;
  list-style:none;
  margin:0;
  padding:0 10px;}

.animate-repeat {
  line-height:40px;
  list-style:none;
  box-sizing:border-box;}

.animate-repeat.ng-move,.animate-repeat.ng-enter,.animate-repeat.ng-leave {
  -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;}

.animate-repeat.ng-leave.ng-leave-active,.animate-repeat.ng-move,.animate-repeat.ng-enter {
  opacity:0;
  max-height:0;}

.animate-repeat.ng-leave,.animate-repeat.ng-move.ng-move-active,.animate-repeat.ng-enter.ng-enter-active {
  opacity:1;
  max-height:40px;}
protractor.js
var friends = element.all(by.repeater('friend in friends'));

it('should render initial data set', Function() {
  expect(friends.count()).toBe(10);
  expect(friends.get(0).getText()).toEqual('[1] John who is 25 years old.');
  expect(friends.get(1).getText()).toEqual('[2] Jessie who is 30 years old.');
  expect(friends.last().getText()).toEqual('[10] Samantha who is 60 years old.');
  expect(element(by.binding('friends.length')).getText())
      .toMatch("I have 10 friends. They are:");});

 it('should update repeater when filter predicate changes', Function() {
   expect(friends.count()).toBe(10);

   element(by.model('q')).sendKeys('ma');

   expect(friends.count()).toBe(2);
   expect(friends.get(0).getText()).toEqual('[1] Mary who is 28 years old.');
   expect(friends.last().getText()).toEqual('[2] Samantha who is 60 years old.');
 });
Vorheriger Artikel： N?chster Artikel：