带路由器的 Angular 材质下拉列表（UI - 路由器）答案

【问题标题】：Angular Material Dropdown with Router ( UI - Router )带路由器的 Angular 材质下拉列表（UI - 路由器）
【发布时间】：2016-03-15 03:34:26
【问题描述】：

当用户点击用户时，它会使用 app.js 中定义的 ui-router 逻辑调用表单 (form.html)。我有 2 种类型的下拉框，（1）使用 select 标签和（2）使用 md-select 标签。页面工作正常，直到我点击第二个下拉菜单，它不会打开下拉选项窗口，而是冻结页面。我在 plunker 中添加了代码，但是页面路由在 plunker 中不起作用，但您可以参考代码。

index.html

<body ng-app="myApp">
            <div class="col-sm-3 sidenav">
                <div class="well"> <!-- container to hold status bar and form -->
                    <nav class="navbar navbar-default navbar-custom">
                        <a style="font-size:2.5em;position: absolute; left: 50%;" ui-sref="form"><span class="glyphicon glyphicon-user fa-5x" id="Icon"></span></a>
                    </nav>

                    <div class="column-nav-form" ui-view="formColumn" >  <!--holds the form -->
                    </div>
                </div> 
            </div>
    </body>

form.html

<body>
<div ng-app="myApp" ng-controller="myCtrl">
    <h4> Normal DropDown </h4>
    <select ng-model="selectedName" ng-options="x for x in names">
    </select>
</div>
<p>I have three elements in my list, you should be able to pick whichever you like</p>
<div ng-app="myApp" ng-controller="myCtrl">
    <h4> Material DropDown </h4>
    <md-select onclick='console.log("clicked")' ng-model="selectedFilter" placeholder="Select a filter">                             <md-select-label>{{ selectedFilter.name }}</md-select-label> 
        <md-option ng-value="opt" ng-repeat="opt in filters">{{ opt.name }}</md-option>
    </md-select>
</div>
</body>

app.js

var myApp = angular.module('myApp', [ 'ngAnimate', 'ngAria', 'ui.bootstrap', 'ngMaterial', 'ngMessages', 'ui.router' ]);

//routing
angular.module('myApp').config(function ($stateProvider){

    $stateProvider
        .state('form', {
        url:"/form",
            views:  {
                "listColumn": {

                  },
                "formColumn": {
                      templateUrl: "/form.html"
                  } 
            }
        })  
});

//dropdown
myApp.controller('myCtrl', function($scope) {
    //log
    console.log($scope.names);
    $scope.names = ["Emil", "Tobias", "Linus"];

    $scope.filters = [
            {
                value: 'mine',
                name: 'Assigned to me'
            },
            {
                value: 'undefined',
                name: 'Unassigned'
            },
            {
                value: 'all',
                name: 'All Tickets'
            },
            {
                value: 'new',
                name: 'New Tickets'
            }
        ];

    //log
    console.log($scope.filters);
    console.log($scope.selectedFilter);
});

http://plnkr.co/edit/SB7MUM44Ly01aWyL5M28?p=preview

点击人物图标查看

注意：md-select 的下拉菜单不会加载。

提前致谢

【问题讨论】：

而不是使用ng-value 使用value 属性。

标签： javascript angularjs drop-down-menu angular-ui-router angular-material

【解决方案1】：

将 .css 和 .js 版本更改为相同，并对其进行了修复。

angular-material.js (v 1.0.6)
角材料.css (v 1.0.6)

链接：

<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>-->

【讨论】：