ionic 下拉选择框中默认显示传入的参数

时间:2023-01-08 22:08:01

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

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

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

ionic 下拉选择框中默认显示传入的参数的更多相关文章

  1. layui下拉选择框select不显示

    弹层layer下拉框没有样式_不可点击_没有效果_渲染失效的解决办法 一.必须给表单体系所在的父元素加上 class="layui-form" 在一个容器中设定 class=&qu ...

  2. CSS自定义select下拉选择框&lpar;不用其他标签模拟&rpar;

    今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方 ...

  3. 背水一战 Windows 10 &lpar;105&rpar; - 通知(Toast)&colon; 带按钮的 toast&comma; 带输入的 toast(文本输入框,下拉选择框)

    [源码下载] 背水一战 Windows 10 (105) - 通知(Toast): 带按钮的 toast, 带输入的 toast(文本输入框,下拉选择框) 作者:webabcd 介绍背水一战 Wind ...

  4. selenium的下拉选择框

    今天总结下selenium的下拉选择框.我们通常会遇到两种下拉框,一种使用的是html的标签select,另一种是使用input标签做的假下拉框. 后者我们通常的处理方式与其他的元素类似,点击或使用J ...

  5. selenium之 下拉选择框Select

    今天总结下selenium的下拉选择框.我们通常会遇到两种下拉框,一种使用的是html的标签select,另一种是使用input标签做的假下拉框. 后者我们通常的处理方式与其他的元素类似,点击或使用J ...

  6. java、easyui-combotree树形下拉选择框

    最近一直在研究这个树形的下拉选择框,感觉非常的有用,现在整理下来供大家使用: 首先数据库的表架构设计和三级菜单联动的表结构是一样,(父子关系) 1.下面我们用hibernate建一下对应的额实体类: ...

  7. HTML、CSS小知识--兼容IE的下拉选择框select

    HTML <div class="s_h_ie"> <select id="Select1" disabled="disabled& ...

  8. openerp模块收藏 移除下拉选择列表中的&OpenCurlyDoubleQuote;创建并编辑”链接(转载)

    移除下拉选择列表中的“创建并编辑”链接 原文:http://shine-it.net/index.php/topic,5990.0.html 有时希望下拉列表中列出的项是与主表某个字段关联的,用户只能 ...

  9. UI标签库专题十一:JEECG智能开发平台 DictSelect &lpar;数据字典下拉选择框&rpar;

     1. DictSelect (数据字典下拉选择框) 1.1. 參数 属性名 类型 描写叙述 是否必须 默认值 typeGroupCode string 字典分组编码 是 null field s ...

随机推荐

  1. 让finder显示路径

    在控制台输入 defaults write com.apple.finder _FXShowPosixPathInTitle -bool YES 重启finder即可.

  2. hdu 5726&lpar;二分&rpar;

    GCD Time Limit: / MS (Java/Others) Memory Limit: / K (Java/Others) Total Submission(s): Accepted Sub ...

  3. 关于map与set的一点理解;

    set代码: #include<stdio.h> #include<set> using namespace std; int main(){ set<int>m; ...

  4. 安装ArcGIS License 10&period;1 许可管理器 破解版 服务启动又失败的解决办法

    安装破解文件的提示执行 替换许可管理器Bin下面的service.txt  文件,之后会发现,许可管理器启动不了(有时候又可以,挺郁闷), 经过多次的试验,我找到了一种折中解决的方法,供大家参考 解决 ...

  5. &period;Net Core下 Redis的String Hash List Set和Sorted Set的例子

    1.新建一个.Net Core控制台应用程序,用Nuget导入驱动 打开程序包管理控制台, 执行以下代码. PM> Install-Package ServiceStack.Redis 即可添加 ...

  6. js根据顺序加载,有依赖关系

    function loadScript(url, callback) { var script = document.createElement("script"); script ...

  7. 消息 xxx,级别 16,状态 x,过程 sp&lowbar;executesql,第 x 行 过程需要类型为 &&num;39&semi;ntext&sol;nchar&sol;nvarchar&&num;39&semi; 的参数 &&num;39&semi;&commat;statement&&num;39&semi;。

    消息 xxx,级别 16,状态 x,过程 sp_executesql,第 x 行 过程需要类型为 'ntext/nchar/nvarchar' 的参数 '@statement'. 原来的语句: ) s ...

  8. LeetCode 46 Permutations(全排列问题)

    题目链接:https://leetcode.com/problems/permutations/?tab=Description   Problem:给出一个数组(数组中的元素均不相同),求出这个数组 ...

  9. PHP 如何获取二维数组中某个key的集合&lpar;高性能查找&rpar;

    分享下PHP 获取二维数组中某个key的集合的方法. 具体是这样的,如下一个二维数组,是从库中读取出来的. 代码: $user = array( 0 => array( 'id' => 1 ...

  10. JNI中GetStringChars函数中的isCopy

    一直不明白这个isCopy是什么意思,只知道每次使用的时候都传NULL,今天看到了相关的资料,特来分享下. 当从JNI函数GetStringChars中返回得到字符串B时,如果B是原始字符串java. ...