angularjs中下拉框select option默認值
阿新 • • 發佈:2018-06-06
edt 工作 ima TP class 匯報 span 說明 pre
1.問題說明:
option ng-repeat多空白項
2.解決方案:
html:
<ion-view hide-nav-bar="true"> <ion-content> <div class="list card"> <div> <label class="item item-input item-select"> <div class="input-label"> <span>安排類型</span> </div> <select ng-change="selectAction()" ng-model="selectedType.value" ng-init="selectedType.value = ‘‘" > <option value="">-- 請選擇 --</option> <option ng-repeat="item in workArrangeTypes" value="{{item.value}}" >{{item.name}}</option> </select> </label> </div> <div class="item"> <button style="width: 100%;" class="button button-positive" ng-click="submitWork()">提交安排工作</button> </div> </div> </ion-content> </ion-view>
js:
/************************************** 區域管理 *************************************/ .controller(‘RegionalManageCtrl‘, [‘$scope‘,function($scope) { /*** 測試 ***/ $scope.selectedType = {value: 1}; // 默認值 $scope.workArrangeTypes = [ {name: ‘社區服務‘, value: 1}, {name: ‘教育學習‘, value: 2}, {name: ‘思想匯報‘, value: 3}, {name: ‘電話匯報‘, value: 4}, {name: ‘家庭訪問‘, value: 5} ]; // 工作安排類型 // 每次option改變時自動調用該方法 $scope.selectAction = function() { console.log($scope.selectedType.value); // 5 } /** * 提交工作安排 */ $scope.submitWork = function() { console.log($scope.selectedType); // {value: 5} } }])
3.效果圖
angularjs中下拉框select option默認值