zoukankan      html  css  js  c++  java
  • ionic 下拉选择框中默认显示传入的参数

    开发过程当中遇到一个有趣的问题,如果我在第一个页面需要把

    item {

    "ownerId" : 1

    }

    传递给第二个页面,并挂在$scope下

    $scope.item = $stateParams.item;

    然后在第二个页面我会请求后台获取可用的带选项,放到一个list 里,list 里是与item数据结构部分相同的数据。

    list[i]{

      "ownerId":1,//这部分是和item里的一样的,用于后台记录

      "ownerName":"wjw"//可以理解为和id对应的name,用于显示

    }

    其中默认选项要放item里的数据,即页面显示传过来的数据对应的ownerName。如果我们从下拉框中选择了新的数据,要可以双向绑定到控制器中的变量$scope.item.ownerId当中。这样,我们就可以在后续操作中把被选条目list[i].ownerId, 即一个item.ownerId 类型的数据传递给后台。

    如果我们直接把数据放到页面上,当然可以显示,但是双向绑定的不是请求回来的最新数据,而是上个页面传过来的数据。

    前提,我们从后台请求得到的数据当中,一定有我们从上个页面传递过来的数据。

    假设我们的请求是:

    var defer = $q.defer();

    apiService.getList(function (resp){

      if(resp.success){

        $scopes.list = resp.data;

        //我们这里做一个循环,如果我们从上个页面传递过来的数据包含请求回来的数据列表$scope.list中,就可以做一个循环 

        for(var i = 0; i < $scope.lsit.length; i++){

          if($scope.list[i].ownerId == $scope.item.ownerId){//找到 列表中和 item中一样的Id
            $scope.item.ownerId = $scope.list[i].ownerId;//把 list 中的 list[i].ownerId传递给 $scope.item.ownerId 这个就是要双向绑定的变量。这一步非常重要,angularjs中如果不把默认要显示的变量重新赋值,页面上是不显示的。

          }

        }

        defer.resolve();

      }else{

        defer.reject(resp);

      }

    },{

      //params 请求参数

    });

    ionic 下拉列表,在html中的写法

    <ion-item class="item-input item-select">
    <span class="input-label">人员:</span>
    <select ng-model="item.ownerId" ng-options="item.ownerId as item.ownerName for people in list">
    <option value="">-- 请选择 --</option>
    </select>
    </ion-item>

    在html中我们双向是绑定的是 item.ownerId, 在待选项中,我们会把item.ownerName显示出来,把选中的 item.ownerId 赋值给 双向绑定的变量。

    这样我们就实现了 页面跳转之后默认显示传递的数据,而选中某项后把值替换。

  • 相关阅读:
    el-select remote 远程搜索 多个共享一个options,options改变时输入框值不显示名称的问题
    vue 中数据共享的方式
    关于AI本质的思考
    人工智能——一场精妙的商业炒作
    相关下载链接
    只用两个问题通关《极限挑战皇家宝藏》最后一关
    常见图片格式详解
    改写《python基础教程》中的一个例子
    介绍四款windows下的神器
    实现windows批处理下的计时功能
  • 原文地址:https://www.cnblogs.com/wjw-blog/p/7229481.html
Copyright © 2011-2022 走看看