zoukankan      html  css  js  c++  java
  • 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=" 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);
    }


     
     
  • 相关阅读:
    数据结构之队列
    数据结构之循环链表-c语言实现
    数据结构之栈-c语言实现
    数据结构之栈
    vue v-model原理实现
    vue中使用mixins
    async和await
    vue组件中使用watch响应数据
    vue组件中使用<transition></transition>标签过渡动画
    react-motion 动画案例介绍
  • 原文地址:https://www.cnblogs.com/liziyou/p/6434726.html
Copyright © 2011-2022 走看看