文章参考 http://www.codeweblog.com/angularjs-select%E8%AF%A6%E7%BB%86%E7%94%A8%E6%B3%95/
ng-options指令的使用
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
<!--<script src="public/js/jquery.js"></script>-->
<script src="../public/ionic/js/ionic.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="../public/ionic/css/ionic.min.css">
</head>
<body ng-controller="myCtrl">
<select ng-model="selected" ng-options="m.productName for m in model">
<option value="">-- 请选择 --</option>
</select>
<hr>
<select ng-model="selected" ng-options="(m.productColor + ' - ' + m.productName) for m in model">
<option value="">-- 请选择 --</option>
</select>
<hr>
<select ng-model="selected" ng-options="(m.productColor + ' - ' + m.productName) group by m.mainCategory for m in model">
<option value="">-- 请选择 --</option>
</select>
<hr>
<select ng-model="selected" ng-options="m.id as m.productName for m in model">
<option value="">-- 请选择 --</option>
</select>
<hr>
<select ng-model="selected" ng-options="obj.value as obj.text for obj in arrayData"></select>
</body>
</html>
<script>
angular.module('myApp', ['ionic'])
.controller('myCtrl', function($scope,$ionicModal,$q,$http) {
$scope.selected = 2;
$scope.model = [{
id: 10001,
mainCategory: '男',
productName: '水洗T恤',
productColor: '白'
}, {
id: 10002,
mainCategory: '女',
productName: '圆领短袖',
productColor: '黑'
}, {
id: 10003,
mainCategory: '女',
productName: '短袖短袖',
productColor: '黃'
}];
$scope.arrayData = [{ "value": 111, "text": "1st" }, { "value": 2222, "text": "2nd" }];
});
</script>
select标签双向绑定,监听change事件
<div class="list"> <label class="item item-input item-select"> <div class="input-label">选择时间段</div> <select ng-change="selectChange(dateValue)" ng-model="dateValue"> <option value="1" selected>前一个月</option> <option value="3">前三个月</option> <option value="6">前六个月</option> <option value="12">前12个月</option> </select> </label> </div>
angular.module("hkApp").controller("goodsSaleReportController", ["$scope", "$state",'goodsSaleReportService', function ($scope, $state,goodsSaleReportService) {
//select option改变触发的事件
$scope.selectChange = function(dateValue){
console.log("value : " + dateValue);
//向服务器获取报表的参数
var paramConfig = {
bngintime:"",
endtime:"",
month:dateValue,
"top":5
};
getSaleData(paramConfig);
};
}]);