angularjs 下select中ng-options使用

当我有一堆object数据要用下拉框进行显示选择时,可以使用到angularjs中的select中的ng-options的属性。官网网址:https://docs.angularjs.org/api/ng/directive/ngOptions

比如数据为:

"data2":["全场广告商户1","全场广告商户2","二号餐厅","三号咖啡","jhct","xiong","huhu1","绿茶餐厅","江南厨子","新月饭店","鑫益达","bhct","全场广告商户3","柳柳3","商户后台","全场广告商户4","测试","测试2","星巴克","猫屎咖啡","维拉度假别墅"]
页面
<select id="selectCompaney" style="width: 120px" ng-model="company" ng-options="company for company in companyList" ng-change="selectCompaney()">
    <option value="">所有商户</option>
</select>

js ng-model控制company的值,之后根据company的变化跟后台进行数据交互
$scope.companyList = data.data2;
$scope.selectCompaney = function () {
    $scope.parkingName = '';
    $scope.totalName = $scope.company;
};
 


但是数据为:
"data":[{"parkingName":"啦啦停车场","parkId":"99999888881474167822"},{"parkingName":"软件产业基地停车场","parkId":"0755000021433988491"},
{"parkingName":"正中时代大厦停车场","parkId":"07550000161454379616"},{"parkingName":"哈哈停车场","parkId":"07550000291459830045"
},
{"parkingName":"加油猫","parkId":"78945612301479432508"
},{"parkingName":"后台2","parkId":"18681498421480595335"}
{"parkingName":"测试停车场","parkId":"88888888881481708747"},{"parkingName":"无敌加油站321","parkId":"158273559891482455244"
}]
而我想在页面显示的是parkingName,的值,但是我进行交互的值为parkId的值。

页面:
<select ng-model="parkId" ng-options="park.parkId as park.parkingName for park in openMonthCardList" id="parkingName" ng-change="getOpenParkName()">
    <option value="">所有停车场</option>
</select>

js:利用jquery中根据id=parkingName寻找到当前选中的text

  

$scope.getOpenParkName = function(){
    $scope.getParkId = $('#parkingName').find('option:selected').text();
    console.log($scope.getParkId);
    console.log($scope.parkId);
}


 
 
posted @ 2017-02-23 18:06  liziyou  阅读(5121)  评论(0编辑  收藏  举报