frontender2016-02-15 12:14:24
frontender, 2016-02-15 12:14:24

AngularJS ui.router and ng-repeat?

There was a problem in order to make friends ng-repeat and ui-view.
I have the following routing settings:

(function () {

      .module('app', ['ui.router'])

  function configure($stateProvider, $urlRouterProvider) {


        .state('home', {
          url: '/',
          views: {
            'formView': {
              templateUrl: './app/form/form.html',
              controller: 'FormController as form'
            'listView': {
              templateUrl: './app/list/list.html',
              controller: 'ListController as list'
            'listItemView': {
              templateUrl: './app/item/item.html',
              controller: 'ItemController as item'

There is such a view with a list of tasks:
<h2>Список задач</h2>
<div class="list border">
  <div ng-repeat="item in list.items">
    <div ui-view="listItemView"></div>

and such a view with a list element (item):
<div class="item" >
  <span class="time">{{ item.endTime }}</span>
  <span class="title">{{ item.title }}</span>
      <span class="show-comment-btn">
        <span class="comment">{{ item.comment }}</span>
  <a href="#add-minutes" title="Добавить 10 мин ко времени" ng-click="item.addTenMinutes()">+10 мин</a>
  <a href="#del" title="Удалить задание" ng-click="item.removeTask()">x</a>

what to smoke to make it work for me?
If you just insert the code from the item inside the block with ng-repeat, then everything works. But not with ui-view. Maybe I'm not doing it right. Tell me how it is necessary and how it will be more competent to make such a bunch.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
Nicholas, 2016-02-15

You don't quite understand how ui-router works.
Your list item view must be a directive (well, or a component in 1.5, which is essentially the same thing), then it will work as you want.
In fact, ui-router allows you to divide your page into N components, for each of which you can specify your own template, and specify the rules by which they will be replaced.
In your example, there are two such components: a form and a list of tasks.
The list item must be a child component of your list view.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question