Dev & Type: AngularJS шаг за шагом

Показаны сообщения с ярлыком AngularJS шаг за шагом. Показать все сообщения

Двухсторонняя привязка данных в AngularJS

В этом шаге мы сделаем сортировку. Для реализации сортировки мы добавим в модель данных новое свойство и свяжем его с циклом, всё остальное сделает за нас механизм привязки данных.

Дальше »

Циклы в AngularJS

В этом степе рассмотрим как можно напечатать таблицу умножения средствами AngularJS.

А поможет нам в этом директива ng-repeat. Это директива позволяет повторить тег n-е количество раз. Вот как она используется:

<body ng-app>
    <table border="1">
        <tr>
            <th>x</th>
            <th ng-repeat="h in [1, 2, 3, 4, 5, 6, 7, 8, 9]">{{h}}</th>
        </tr>
        <tr ng-repeat="i in [1, 2, 3, 4, 5, 6, 7, 8, 9]">
            <td><strong>{{i}}</strong></td>
            <td ng-repeat="j in [1, 2, 3, 4, 5, 6, 7, 8, 9]">{{i*j}}</td>
        </tr>
    </table>
</body>

В целом тут должно быть всё понятно. В значении директивы ng-repeat прописывается цикл в формате переменная in [возможные значения].

Выражения в двойных фигурных скобках мы уже рассматривали на прошлом шаге.

исходник

Выражения в AngularJS

В этом учебнике для новичков мы разберемся с AngularJS. Сразу разберем простой пример.

Для начала откройте песочницу JSFiddle.

Слева на панели Frameworks & Extensions выберите AngularJS 1.2.1.

Тем самым мы подключили фреймворк и можем начать его использовать.

Теперь в окошке HTML напишем следующий код:

<body ng-app>
  <p>Nothing here {{'yet' + '!'}}</p>
  <p>1 + 2 = {{ 1 + 2 }}</p>
</body>

Здесь мы видим привычный нам тег <body> с атрибутом ng-app. Только в терминах AngularJS это не атрибут, а директива. Загрузчик AngularJS-приложения начинает с поиска этой директивы в HTML-коде.

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

Запустим приложение (для этого надо нажать кнопку Run) и посмотрим, что получилось:

Попробуйте убрать директиву ng-app и вы увидите, что выражения перестали вычисляться, потому что AngularJS-приложение не загрузилось.

исходник