AngularJS => Встроенные директивы

Угловые выражения - текст и номер

В этом примере показано, как вычисляются угловые выражения при использовании type="text" и type="number" для элемента ввода. Рассмотрим следующий контроллер и представление:

контроллер

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

 app.controller('ctrl', function($scope) {
     $scope.textInput = {
         value: '5'
     };     
     $scope.numberInput = {
         value: 5
     };
 });

Посмотреть

<div ng-app="app" ng-controller="ctrl">
    <input type="text" ng-model="textInput.value">
    {{ textInput.value + 5 }}
    <input type="number" ng-model="numberInput.value">
    {{ numberInput.value + 5 }}
</div>

При использовании + в выражении, привязанном к текстовому вводу, оператор объединяет строки (первый пример), отображая 55 на экране * .
При использовании + в выражении, связанном с номером ввода, оператор возвращает сумму чисел (второй пример), отображая 10 на экране * .

* - То есть, пока пользователь не изменит значение в поле ввода, после этого дисплей изменится соответствующим образом.

Рабочий пример

ngRepeat

ng-repeat - встроенная директива в Angular, которая позволяет вам перебирать массив или объект и дает вам возможность повторять элемент один раз для каждого элемента в коллекции.

ng-повторить массив

<ul>
    <li ng-repeat="item in itemCollection">
       {{item.Name}}
    </li>
</ul>

Куда:
item = отдельный элемент в коллекции
itemCollection = массив, который вы повторяете

ng-повторить объект

<ul>
    <li ng-repeat="(key, value) in myObject">
       {{key}} : {{value}}
    </li>
</ul>

Куда:
key = имя свойства
value = значение свойства
myObject = объект, который вы повторяете

отфильтруйте свой ng-repeat по пользовательскому вводу

<input type="text" ng-model="searchText">
<ul>
    <li ng-repeat="string in stringArray | filter:searchText">
       {{string}}
    </li>
</ul>

Куда:
searchText = текст, который пользователь хочет отфильтровать список
stringArray = массив строк, например ['string', 'array']

Вы также можете отображать или ссылаться на отфильтрованные элементы в другом месте, назначая выход фильтра псевдонимам с as aliasName , например:

<input type="text" ng-model="searchText">
<ul>
    <li ng-repeat="string in stringArray | filter:searchText as filteredStrings">
       {{string}}
    </li>
</ul>
<p>There are {{filteredStrings.length}} matching results</p>

ng-repeat-start и ng-repeat-end

Чтобы повторить несколько элементов DOM, определив начало и конечную точку, вы можете использовать директивы ng-repeat-start и ng-repeat-end .

<ul>
    <li ng-repeat-start="item in [{a: 1, b: 2}, {a: 3, b:4}]">
        {{item.a}}
    </li>
    <li ng-repeat-end>
        {{item.b}}
    </li>
</ul>

Выход:

Важно всегда закрывать ng-repeat-start с ng-repeat-end .

переменные

ng-repeat также предоставляет эти переменные внутри выражения

переменная	Тип	подробности
`$index`	Число	Равна индексу текущей итерации ($ index === 0 будет оценивать значение true на первом итерированном элементе, `$first` увидеть `$first` )
`$first`	логический	Вычисляет значение true при первом повторном элементе
`$last`	логический	Вычисляет значение true при последнем повторном элементе
`$middle`	логический	Вычисляет значение true, если элемент находится между `$first` и `$last`
`$even`	логический	Вычисляет значение true при четной итерации (эквивалентно `$index%2===0` )
`$odd`	логический	Вычисляет значение true при нечетной итерации (эквивалентно `$index%2===1` )

Требования к производительности

Рендеринг ngRepeat может стать медленным, особенно при использовании больших коллекций.

Если объекты в коллекции имеют свойство идентификатора, вы всегда должны track by идентификатор, а не весь объект, который является функциональностью по умолчанию. Если идентификатор отсутствует, вы всегда можете использовать встроенный $index .

<div ng-repeat="item in itemCollection track by item.id">
<div ng-repeat="item in itemCollection track by $index">

Область действия ngRepeat

ngRepeat всегда будет создавать изолированную область для ngRepeat , поэтому следует соблюдать осторожность, если к нему нужно получить доступ к родительской области внутри повтора.

Вот простой пример, показывающий, как вы можете установить значение в своей родительской области из события click внутри ngRepeat .

scope val:  {{val}}<br/>
ctrlAs val: {{ctrl.val}}
<ul>
    <li ng-repeat="item in itemCollection">
        <a href="#" ng-click="$parent.val=item.value; ctrl.val=item.value;">
            {{item.label}} {{item.value}}
        </a>
    </li>
</ul>

$scope.val = 0;
this.val = 0;

$scope.itemCollection = [{
    id: 0,
    value: 4.99,
    label: 'Football'
},
{
    id: 1,
    value: 6.99,
    label: 'Baseball'
},
{
    id: 2,
    value: 9.99,
    label: 'Basketball'
}];

Если в ng-click был только val = item.value он не будет обновлять val в родительской области из-за изолированной области. Вот почему доступ к родительской области осуществляется с помощью $parent reference или с синтаксисом controllerAs (например, ng-controller="mainController as ctrl" ).

Вложенные ng-repeat

Вы также можете использовать вложенный ng-repeat.

<div ng-repeat="values in test">
    <div ng-repeat="i in values">
      [{{$parent.$index}},{{$index}}] {{i}}
    </div>
</div>

var app = angular.module("myApp", []);
app.controller("ctrl", function($scope) {
  $scope.test = [
    ['a', 'b', 'c'],
    ['d', 'e', 'f']
  ];
});

Чтобы получить доступ к индексу родительского ng-repeat внутри дочернего ng-repeat, вы можете использовать $parent.$index .

ngShow и ngHide

Директива ng-show показывает или скрывает элемент HTML на основе того, передано ли ему выражение true или false. Если значение выражения ложно, то оно будет скрыто. Если это правда, то это покажет.

Директива ng-hide аналогична. Однако, если значение ложно, оно отобразит элемент HTML. Когда выражение правдиво, оно скроет его.

Рабочий пример JSBin

Контроллер :

var app = angular.module('app', []);
  
angular.module('app')
  .controller('ExampleController', ExampleController);
 
function ExampleController() {
  
  var vm = this;
  
  //Binding the username to HTML element
  vm.username = '';
  
  //A taken username
  vm.taken_username = 'StackOverflow';
  
}

Посмотреть

<section ng-controller="ExampleController as main">
    
    <p>Enter Password</p>
    <input ng-model="main.username" type="text">
    
    <hr>
    
    <!-- Will always show as long as StackOverflow is not typed in -->
    <!-- The expression is always true when it is not StackOverflow -->
    <div style="color:green;" ng-show="main.username != main.taken_username">
      Your username is free to use!
    </div>
    
    <!-- Will only show when StackOverflow is typed in -->
    <!-- The expression value becomes falsy -->
    <div style="color:red;" ng-hide="main.username != main.taken_username">
      Your username is taken!
    </div>
    
    <p>Enter 'StackOverflow' in username field to show ngHide directive.</p>
    
 </section>

ngOptions

ngOptions - это директива, упрощающая создание раскрывающегося окна html для выбора элемента из массива, который будет храниться в модели. Атрибут ngOptions используется для динамического создания списка элементов <option> для элемента <select> используя массив или объект, полученный путем оценки выражения понимания ngOptions.

С ng-options разметка может быть уменьшена до всего лишь тега select, и директива создаст тот же самый выбор:

<select ng-model="selectedFruitNgOptions" 
        ng-options="curFruit as curFruit.label for curFruit in fruit">
</select>

Существует еще один способ создания опций select с помощью ng-repeat , но не рекомендуется использовать ng-repeat поскольку он в основном используется для общего использования, например, forEach только для цикла. В то время как ng-options специально предназначено для создания опций select tag.

Вышеприведенный пример с использованием ng-repeat будет

<select ng-model="selectedFruit">
    <option ng-repeat="curFruit in fruit" value="{{curFruit}}">
        {{curFruit.label}}
    </option>
</select>

ПОЛНЫЙ ПРИМЕР

Давайте рассмотрим приведенный выше пример подробно и с некоторыми изменениями в нем.

Модель данных для примера:

$scope.fruit = [
    { label: "Apples", value: 4, id: 2 },
    { label: "Oranges", value: 2, id: 1 },
    { label: "Limes", value: 4, id: 4 },
    { label: "Lemons", value: 5, id: 3 }
];

<!-- label for value in array -->
<select ng-options="f.label for f in fruit" ng-model="selectedFruit"></select>