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 赋值给 双向绑定的变量。

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

  • 相关阅读:
    Linux服务器下载与上传文件
    Java代码实现定时器
    windows elasticsearch使用ik分词器插件后启动报错java.security.AccessControlException: access denied ("java.io.FilePermission" "D:...........pluginsik-analyzerconfigIKAnalyzer.cfg.xml" "read")
    windows elasticsearch搭集群启动失败failed to send join request to master....
    Oracle使用命令行登录提示ERROR: ORA-01017: invalid username/password; logon denied
    nrm : 无法加载文件 C:UsersTANGAppDataRoaming pm rm.ps1,因为在此系统上禁止运行脚本。
    Go 语言环境安装
    Go语言简介
    http 请求头的Cookie中的 JSESSIONID 是什么?
    什么是锚点?锚点有什么作用?
  • 原文地址:https://www.cnblogs.com/wjw-blog/p/7229481.html
Copyright © 2011-2022 走看看