, когда пользователь нажимает на человека, которому он называет форму (form.html), используя логику ui-router, определенную в app.js. У меня есть два типа раскрывающихся ящиков, (1) с использованием тега select и (2) с использованием тега md-select. Страницы работают нормально, пока я не нажму на второй выпадающий список, который не откроет окно с раскрывающимся списком, вместо этого он замораживает страницу. Я добавил код здесь в plunker, однако маршрутизация страниц не работает в plunker, но вы можете ссылаться на код.Распаковка углового материала с маршрутизатором (UI - Router)
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
View при нажатии человека значок
Примечание: раскрывающаяся папка для md-select не загружается.
Заранее спасибо
Вместо использования 'использование нг-value'' стоимость' attaribute. – nextt1