您的位置：首页 > Web前端 > AngularJS

angularjs select标签 ng-options ng-change学习

2016-09-07 18:10 375 查看

文章参考 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);
};

}]);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航