[英]select input is not working? Using Single-page-application AngularJS
I have a single-page application and I have a problem loading things in my UI 我有一个单页应用程序,但是在UI中加载内容时遇到问题
So my index.html goes like this 所以我的index.html像这样
html lang="en" ng-app="App" ng-controller="IndexController">
<head>
<!-- CORE CSS-->
<link href="css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection">
<link href="css/style.min.css" type="text/css" rel="stylesheet" media="screen,projection">
<link href="css/custom/custom.min.css" type="text/css" rel="stylesheet" media="screen,projection">
<script type="text/javascript" src="js/plugins/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="libs/angular/angular.min.js"></script>
<script type="text/javascript" src="libs/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="libs/angular-utils-pagination/dirPagination.js"></script>
<script type="text/javascript" src="js/materialize-plugins/date_picker/picker.js"></script>
<script type="text/javascript" src="js/materialize-plugins/date_picker/picker.date.js"></script>
<script type="text/javascript" src="js/ngStorage.min.js"></script>
<script type="text/javascript" src="js/plugins/select2.js"></script>
<script type="text/javascript" src="js/controller/IndexController.js"></script>
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body class="cyan">
*some navbar codes here*
<section id="content">
<div ng-view>
</div>
</section>
</body>
*some scripts here*
</html>
then I have my other pages like this 然后我有其他这样的页面
<section id="content" ng-controller="DashboardController">
*some codes here*
<select required id="names" ng-model="selectedName" ng-class="{invalid : validation.names}" ng-options="x for x in names"></select>
<div class="row">
<div ng-repeat="x in names">
{{x}}
</div>
</div>
<div class="row">
<div class="input-field col s4"></div>
<div class="input-field col s4">
<a class="btn waves-effect waves-light white blue-text" ng-click="cancelRequest()">Cancel</a>
<a class="btn waves-effect waves-light blue" ng-click="transaction()">Save</a>
</div>
<div class="input-field col s4"></div>
</div>
</section>
the thing is I can't use select, radio boxes, check boxes and so on. 事情是我不能使用选择框,单选框,复选框等。
In my dashboard controller I have a list named $scope.names
where the data are $scope.names = ["Emil", "Tobias", "Linus"];
在我的仪表板控制器中,我有一个名为
$scope.names
的列表,其中的数据为$scope.names = ["Emil", "Tobias", "Linus"];
and it is declared in my init function 它在我的init函数中声明
as you read you know it should work with the above code right? 如您所读,您知道它应该与以上代码一起使用对吗? but...
但...
it is showing with ng-repeat but not in ng-options 它以ng-repeat显示,但未在ng-options中显示
Can someone tell me what's wrong? 有人可以告诉我怎么了吗? I'm wracking my brains for hours already :(
我已经动脑了好几个小时了:(
I also have 我也有
$(document).ready(function () {
$('select').material_select();
});
and if I hard coded the <option></option>
it wouldn't work unless I put 如果我硬编码
<option></option>
,除非我输入
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/plugins/angular-materialize.js"></script>
<script type="text/javascript" src="js/plugins.min.js"></script>
Edit: 编辑:
.controller('DashboardController', function ($http,$scope,$sessionStorage,StartingService,LogService,SweetAlert) {
(function init() {
$http.defaults.headers.common['Authorization'] = $sessionStorage.authenticate;
$scope.isLogin = $sessionStorage.showLogin;
$sessionStorage.currentBusiness;
$(document).ready(function () {
$('select').material_select();
$('.tooltipped').tooltip({delay: 50});
});
So I think you should use $onInit() like this: 所以我认为您应该像这样使用$ onInit():
controller: function() {
this.$onInit = function() {
$('select').material_select();
};
},
Or wrap you select initialization on $timeout: 或者包装您在$ timeout上选择初始化:
$timeout(() => $('select').material_select());
You don't need wrap code to function 您不需要包装代码即可运行
.controller('DashboardController', function ($http,$scope,$sessionStorage,StartingService,LogService,SweetAlert, $timeout) {
$http.defaults.headers.common['Authorization'] = $sessionStorage.authenticate;
$scope.isLogin = $sessionStorage.showLogin;
$sessionStorage.currentBusiness;
$timeout(function () {
$('select').material_select();
$('.tooltipped').tooltip({delay: 50});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.