0

Is it possible to have a view per model , ie an edit view for an item, and only that view to be shown for this specific model?

I have a list of tasks, like a todo list. When I click an add button I want an edit view to be shown only for that list and not for every other list I have.

Sorry for my English and possible ignorance on terminology. I am new to Angularjs

My code:

index.html

<div ng-repeat="list in lists" jui-dg-list="{ handle: 'i.fa-arrows' }" class="md-whiteframe-z2 home-drag list" style="top: {{list.ui_top}}px; left: {{list.ui_left}}px;">
        <md-subheader>{{list.name}}</md-subheader>
        <md-list>
          <md-item ng-repeat="task in list.tasks">
            <md-item-content>
             <div>
                <span>{{task.description}}</span>
                <span>{{task.completed}}</span>
                <span>{{task.priority_id}}</span>
                <i class="fa fa-trash-o" ng-click="deleteTask(task, list)"></i>
             </div>
            </md-item-content>
          </md-item>
          <div ui-view="newTask"></div>
          <i class="fa fa-plus" ng-click="goToState('home.newTask', {id: list.id})"></i>
        </md-list>
        <i class="fa fa-times" ng-click="deleteList(list)"></i>
        <i class="fa fa-arrows"></i>
    </div>

app.js

$stateProvider.state('home', {
      url: '/',
      templateUrl: 'views/home.html',
      controller: 'HomeCtrl',
      resolve: {
              notes: ['NotesLoader', function(NotesLoader){
                return NotesLoader();
              }],
              lists: ['ListsLoader', function(ListsLoader){
                return ListsLoader();
              }]
            }
    });

$stateProvider.state('home.newTask', {
      url: 'list/:id/task/create',
      views: {
        'newTask@home': {
            templateUrl: 'views/home.newTask.html',
            controller: 'NewTaskCtrl'
        }
      }
    });

With this code when I click to add a new task the newTask view will be shown on every list and not on the list I clicked.

That's to be expected because inside to my ng-repeat I have <div ui-view="newTask"></div> so when I go to newTask state every ui-view with the name newTask will be shown.

Is there any way to achieve it only for the model that's was clicked ?

Laxmana
  • 1,606
  • 2
  • 21
  • 40
  • There is an Q & A, where is in detailed explained how we can solve it http://stackoverflow.com/a/24902144/1679310. There is plunker as well. I would say, that this covers your scenario – Radim Köhler Jan 24 '15 at 14:57
  • Thanks a lot! I am searching at least an hour and couldn't find this Q & A. – Laxmana Jan 24 '15 at 14:59
  • Check it you will see.. maybe you need different answer... Take it just as a hint.. – Radim Köhler Jan 24 '15 at 15:00
  • It is a good hint but what I want is a bit different. Although is a good solution and if I can't find an answer I will try it. Thanks again. – Laxmana Jan 24 '15 at 16:50

0 Answers0