Javascript 带路由器的角度材质下拉列表（UI-路由器）_Javascript_Angularjs_Drop Down Menu_Angular Ui Router_Angular Material

Javascript 带路由器的角度材质下拉列表（UI-路由器）

javascript angularjs drop-down-menu angular-material

Javascript 带路由器的角度材质下拉列表（UI-路由器）,javascript,angularjs,drop-down-menu,angular-ui-router,angular-material,Javascript,Angularjs,Drop Down Menu,Angular Ui Router,Angular Material,当用户单击该用户时，它使用app.js中定义的ui路由器逻辑调用表单（form.html）。我有两种类型的下拉框，（1）使用select标签，（2）使用md select标签。页面工作正常，直到我点击第二个下拉菜单，它不会打开下拉选项窗口，而是冻结页面。我在plunker中添加了代码，但是页面路由在plunker中不起作用，但是您可以引用代码 index.html <body ng-app="myApp"> <div class="col-sm-3 si

当用户单击该用户时，它使用app.js中定义的ui路由器逻辑调用表单（form.html）。我有两种类型的下拉框，（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>

点击人物图标查看

注意：md select的下拉列表不加载

提前感谢

将.css和.js版本更改为相同版本，并将其修复

Angle-material.js（V1.0.6）
angular-material.css（V1.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>-->

-->

不要使用

ng值

使用

值

附件。

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);
});

<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>-->