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);
}


 
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM