How to open specific ion-item in a ion-list

997 views Asked by At

I have simple Todo app that was build for practice using ionic framework. For the first time i filled my tasks like this inside app.service :

var todos = [
  {title: "Take out the trash", done: 1},
  {title: "Do laundry", done: 0},
  {title: "Start cooking dinner", done: 1}
]

It works fine. I have an ion-list an can open any item and change its "done" status via check box.

This is my ion-list

    <ion-list>
      <ion-item ng-repeat="todo in todos"
        class="item item-icon-right"
       ui-sref="todos.detail({todo: $index})">
         <span ng-class="{done: todo.done}">{{todo.title}}</span>
     </ion-item>
    </ion-list>

Everything worked fine. Than I decided to fill my todos array from database. Made it work like this inside a controller

     $http.get("http://localhost/test.php")
     .success(function (response) {
       $scope.todos = response.records;
       for(var i=0; i<$scope.todos.length; i++){
         if($scope.todos[i].done == 1){
             $scope.todos[i].done = true;
         }else{
            $scope.todos[i].done = false;
         }
       }
      }); 

It works, I still can list out items in ion-list, but now I am unable to open any of items.

I think something needs to be done with

   ui-sref="todos.detail({todo: $index})

but I do not know what.

EDIT My state provider for todos.detail is

   $stateProvider.state('todos.detail', {
    url: '/:todo',
    templateUrl: 'todo.html',
    controller: 'TodoCtrl',
    resolve: {
        todo: function($stateParams, TodosService) {
        return TodosService.getTodo($stateParams.todo)
        }
    }
  })

Maybe that's the problem becouse, TodosService is not used anymore

   app.service('TodosService', function($http) {
   var todos = []
   return {
     todos: todos,
     getTodo: function(index) {
       return todos[index]
       }
    }
  })
1

There are 1 answers

0
mirzak On BEST ANSWER

Made it work. I needed to fill an array that was returned in TodosServices like this

   app.service('TodosService', function($http) {
   var todos = []
   $http.get("http://localhost/test.php")
   .success(function (response) {
     todos = response.records;
     for(var i=0; i<todos.length; i++){
        if(todos[i].done == 1){
            todos[i].done = true;
        }else{
            todos[i].done = false;
        }

    }
   });   
  return {
    todos: todos,
   getTodo: function(index) {
   return todos[index]
 }
  }
 })