AngularJS/UI路由器从选择/选项更改状态

因此，我有一个使用AngularJS/UI路由器的SPA，我有一个部分需要从选择/选项更改状态。我最初在ng repeat中有如下链接：

<ul class="unstyled">
    <li data-ng-repeat="course in courses">
        <a data-ui-sref=".materials({ courseCode:course.CourseCode })">{{course.Title}}</a>
    </li>
</ul>

具有“选择”选项的状态：

<select style="padding:3px 1px; width:100%;" data-ng-model="course" data-ng-options="course.Title for course in courses" data-ng-change="changeState(course)">
    <option value="">-- Select a Course --</option>
</select>

这里最大的变化是$state.go的语法，它需要解析state courses.track.materials与just.materials的完整路径，参数的语法不同于普通的ui sref语法，因此必须将其设置为{parameter:value}

对于国家本身：

<select style="padding:3px 1px; width:100%;" data-ng-model="course" data-ng-options="course.Title for course in courses" data-ng-change="changeState(course)">
    <option value="">-- Select a Course --</option>
</select>

这基本上没有改变，但重要的是要确保课程通过范围

---

希望这对其他人也有帮助

我能看到的唯一错误是$state作为参数传递给changeState方法，而不是注入控制器。请参阅下面的示例，无任何错误。只需检查您要更改的州名称是否正确。从一个点开始看起来有点奇怪

function BasicController($scope) {

    $scope.changeState = function(course) {
        console.log(course.Title);
        // todo: transition!
    }

    $scope.courses = [{
        Title: 'maths'
    }, {
        Title: 'science'
    }];

}

---

state.go的语法与在锚上使用ui sref时不同。相反，第一个参数是状态名称，第二个是参数。在您的例子中，类似于：$state.go'.materials'，{courseCode:course.courseCode}；。检查一下，你的州名真的以点开头吗？你就是那个人。我刚刚在上面发布了一个完整的答案，但我相信你，因为这正是我最终所做的。谢谢你的帮助！

.controller('CoursesTrackCtrl', function ($scope, $stateParams, $http, $log, $state) {
    $scope.changeState = function (course) {
        $state.go('courses.track.materials', { courseCode: course.CourseCode });
    }
});

<select style="padding:3px 1px; width:100%;" data-ng-model="course" data-ng-options="course.Title for course in courses" data-ng-change="changeState(course)">
    <option value="">-- Select a Course --</option>
</select>

function BasicController($scope) {

    $scope.changeState = function(course) {
        console.log(course.Title);
        // todo: transition!
    }

    $scope.courses = [{
        Title: 'maths'
    }, {
        Title: 'science'
    }];

}