AngularJS To Do Application. Problem with edit button

Question

I'm trying to create To Do List app with ui-router. I can create task, delete but i cannot edit my task because of this problem. Can anyone help me?

Transition Rejection($id: 2 type: 6, message: The transition errored, detail: Error: Transition Rejection($id: 1 type: 4, message: This transition is invalid, detail: The following parameter values are not valid for state 'second': [todoText:undefined]))

var app = angular.module('app', [
    'ui.router',
    'todoApp.services',
    'todoApp.controllers'
]);

app.config(['$stateProvider', function ($stateProvider) {
    $stateProvider
        .state('first', {
            url: '/new',
            templateUrl: 'detail.html',
            controller: 'CreateCtrl'
        })
        .state('second', {
            url: '/edit/:todoText',
            controller: 'EditCtrl',
            templateUrl: 'detail.html'
        })
        .state('third', {
            url: '/',
            controller: 'ListCtrl',
            templateUrl: 'list.html'

        })
        .state('root', {
            controller: 'ListCtrl',
            templateUrl: 'list.html'
        })
}]);

app.controller('EditCtrl', function ($scope, $location, $stateParams, Todos) {
        $scope.todos = Todos;

        var result = $scope.todos.filter(function (obj) {
            return obj.text == $stateParams.todoText;

        }); console.log(result);
        $scope.todoText = result[0].text;
        $scope.todoDetails = result[0].details;
        $scope.todoDate = result[0].date;
        console.log(result);
        $scope.save = function () {
            var text = $scope.todoText;
            var details = $scope.todoDetails;
            var done = $scope.todoDone;
            var date = $scope.todoDate;
            alert(text);
            angular.forEach($scope.todos, function (todo) {
                if (todo.text == text) {
                    todo.text = text;
                    todo.details = details;
                    todo.date = date;
                }
            });

            $location.path('/');
        };
    });

app.factory('Todos', function () {
    var items = [

    ]
    return items;
});

<!-- html button -->
<button class="btn btn-light">
    <a ui-sref='second()'>
        <i class="fas fa-edit"></i>Edit</i>
    </a>
</button>

Answer 1

You have a state second that expects a parameter todoText :

.state('second', {
        url: '/edit/:todoText',
        controller: 'EditCtrl',
        templateUrl: 'detail.html'
    })

The problem is that when you call that state you don't pass any parameter:

<a ui-sref='second()'>

Here you need to add the todoText parameter like this:

<a ui-sref='second({todoText: todo.text})'>

Answer 2

@Bill P helped. Thank you.

      <a ui-sref='second({todoText: todo.text})'>