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

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

  • 相关阅读:
    Poj 3264 Balanced Lineup RMQ模板
    Poj 3294 Life Forms (后缀数组 + 二分 + Hash)
    Poj 1743 Musical Theme (后缀数组+二分)
    Poj 2774 Long Long Message (后缀数组)
    Poj 3436 ACM Computer Factory (最大流)
    Hdu 4465 Candy (快速排列组合+概率)
    Hdu 3605 Escape (最大流 + 缩点)
    Hdu 4292 Food (最大流)
    Hdu 5416 CRB and Tree (bfs)
    Hdu 5407 CRB and Candies (找规律)
  • 原文地址:https://www.cnblogs.com/wjw-blog/p/7229481.html
Copyright © 2020-2023  润新知