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

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

}]);

 

 

 

 

你可能感兴趣的:(angularjs select标签 ng-options ng-change学习)