angularjsselect标签ng-optionsng-change学习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 for obj in arrayData"></select>
</body>
</html>
<script>
.controller('myCtrl', function($scope,$ionicModal,$q,$http) {
$scope.selected = 2;
$del = [{
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>
angular和angularjs<option value="3">前三个⽉</option>
<option value="6">前六个⽉</option>
<option value="12">前12个⽉</option>
</select>
</label>
</div>
//select option改变触发的事件
$scope.selectChange = function(dateValue){
console.log("value : " + dateValue);
//向服务器获取报表的参数
var paramConfig = {
bngintime:"",
endtime:"",
month:dateValue,
"top":5
};
getSaleData(paramConfig);
};
}]);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。