Angularjs 中select回显后重复选项的解决

Angularjs 中select回显后重复选项的解决

（1）Angularjs 中select回显代码,records和categoryValueList都是后台返回的

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {$scope.records = [{"Name" :{ "CATEA": "点"},"Country" :{"Google2": "http://www.google1.com"},"address" :"BJ","job":"lT"},{"Name" :{"CATEB":"直"},"Country" : {"Google3":"http://www.google2.com"},"address" :"EJ","job":"TK"},{"Name" :{"CATEC" : "优惠"},"Country" : { "Google4" : "http://www.google3.com"},"address" :"EJ","job":"3K"}];$scope.categoryValueList=[{"id": 1,"categoryNo": "CATEA","categoryName": "点","parentId": 0,"status": "0","children": [{"id": 6,"categoryNo": "CATEAA","categoryName": "剧","parentId": 1,"status": "0"}, {"id": 7,"categoryNo": "CATEAB","categoryName": "单","parentId": 1,"status": "0"}]
}, {"id": 2,"categoryNo": "CATEB","categoryName": "直","parentId": 0,"status": "0","children": [{"id": 44,"categoryNo": "CATE","categoryName": "AA啊","parentId": 2,"status": "1"}]
}, {"id": 3,"categoryNo": "CATEC","categoryName": "优惠","parentId": 0,"status": "0","createUser": "17072872","createTime": "2017-09-10 16:01:56.0","updateUser": "17072872","updateTime": "2017-09-10 16:01:56.0","children": [{"id": 8,"categoryNo": "CATECA","categoryName": "ip","parentId": 3,"status": "0"}, {"id": 9,"categoryNo": "CATECB","categoryName": "体育","parentId": 3,"status": "1"}]
}]});
</script>
</head><body ng-app="myApp"><table ng-controller="myCtrl" border="1"><tr style="border:0px" id="tr" ng-repeat="x in records"><td><select name="merchant" id="merchant" ng-model="data.merchantNo"><option value="">请选择</option><option ng-repeat="x in categoryValueList" value="{{x.categoryNo}}">{{x.categoryName}}</option><option ng-repeat="(a,b) in x.Name" value="{{a}}" selected >{{b}}</option></select></td><td><select name="category" id="category" ng-model="data.categoryNo"><option value="">请选择</option><option ng-repeat="(a,b) in x.Country" value="{{a}}" selected>{{b}}</option></select></td><td><input type="text" name="rightCode" id="rightCode" value="{{x.address}}"/></td><td><input type="text" name="rightName" id="rightName" value="{{x.job}}" /></td>
</tr>
</table>
</body>
</html>

（2）回显问题：因为后台返回了一个结果，原来的select下拉列表中也有“点”这个option，导致显示了两个。

（3）正常情况下，要求只显示一个，让records中的某个后台返回结果命中categoryValueList（select列表）中的某个option。正确结果如下所示：

（4）修改后的select回显代码，如下所示。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {$scope.records = [{"Name" :{ "CATEA": "点"},"Country" :{"Google2": "http://www.google1.com"},"address" :"BJ","job":"lT"},{"Name" :{"CATEB":"直"},"Country" : {"Google3":"http://www.google2.com"},"address" :"EJ","job":"TK"},{"Name" :{"CATEC" : "优惠"},"Country" : { "Google4" : "http://www.google3.com"},"address" :"EJ","job":"3K"}];$scope.categoryValueList=[{"id": 1,"categoryNo": "CATEA","categoryName": "点","parentId": 0,"status": "0","children": [{"id": 6,"categoryNo": "CATEAA","categoryName": "剧","parentId": 1,"status": "0"}, {"id": 7,"categoryNo": "CATEAB","categoryName": "单","parentId": 1,"status": "0"}]
}, {"id": 2,"categoryNo": "CATEB","categoryName": "直","parentId": 0,"status": "0","children": [{"id": 44,"categoryNo": "CATE","categoryName": "AA啊","parentId": 2,"status": "1"}]
}, {"id": 3,"categoryNo": "CATEC","categoryName": "优惠","parentId": 0,"status": "0","createUser": "17072872","createTime": "2017-09-10 16:01:56.0","updateUser": "17072872","updateTime": "2017-09-10 16:01:56.0","children": [{"id": 8,"categoryNo": "CATECA","categoryName": "ip","parentId": 3,"status": "0"}, {"id": 9,"categoryNo": "CATECB","categoryName": "体育","parentId": 3,"status": "1"}]
}]});
</script>
</head><body ng-app="myApp"><table ng-controller="myCtrl" border="1"><tr style="border:0px" id="tr" ng-repeat="x in records"><td><select name="merchant" id="merchant" ng-model="data.merchantNo"><option value="">请选择</option><option ng-repeat="x in categoryValueList" ng-selected="x.categoryNo==a" value="{{x.categoryNo}}">{{x.categoryName}}</option><option style="display:none" ng-repeat="(a,b) in x.Name" value="{{a}}" selected >{{b}}</option></select></td><td><select name="category" id="category" ng-model="data.categoryNo"><option value="">请选择</option><option ng-repeat="(a,b) in x.Country" value="{{a}}" selected>{{b}}</option></select></td><td><input type="text" name="rightCode" id="rightCode" value="{{x.address}}"/></td><td><input type="text" name="rightName" id="rightName" value="{{x.job}}" /></td>
</tr>
</table>
</body>
</html>

解决后的显示结果:

（5）说明：代码中主要使用了以下代码：

<option ng-repeat="x in categoryValueList" ng-selected="x.categoryNo==a" value="{{x.categoryNo}}">{{x.categoryName}}</option><option style="display:none" ng-repeat="(a,b) in x.Name" value="{{a}}" selected >{{b}}</option>

ng-selected="x.categoryNo==a" : select选中categoryNo等于a的option，对应的就是遍历categoryValueList，选中categoryNo等于records中的categoryNo的编号，然后将records命中的option隐藏。这里使用了前端的方式，解决了list中查找指定内容并选中的问题。

（6）题外：ng-if的使用，过滤满足指定条件的内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.6.3/angular.min.js"></script>
</head>
<body><div ng-app="myApp" ng-controller="customersCtrl"> <table><tr ng-repeat="x in names" ng-if="x.Name =='Alfreds Futterkiste'"><td>{{ x.Name }}</td><td>{{ x.Country }}</td></tr>
</table></div><script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {$http.get("/try/angularjs/data/Customers_JSON.php").then(function (result) {$scope.names = result.data.records;});
});
</script></body>
</html>

转载于:https://blog.51cto.com/59465168/2338968

Angularjs 中select回显后重复选项的解决相关推荐

win10计算机管理没有蓝牙,win10系统中缺少打开或关闭蓝牙选项的解决方法
在win10系统中,自带有蓝牙功能,但是有时候在使用蓝牙的时候,发现设置应用程序或操作中心中缺少打开蓝牙的选项,遇到这样的问题该怎么办呢,本文就给大家讲解一下win10系统中缺少打开或关闭蓝牙选项的解 ...
iTunes的资料库中没有书籍（图书）选项的解决方法
iTunes的资料库中没有书籍(图书)选项的解决方法 1. 在偏好设置中勾选"书籍(图书)" iTunes --> 编辑 --> 偏好设置 --> 常规选项卡 - ...
5-struts2知识补充( 常用的struts2的标签,数据回显,防止重复提交）
目录: ognl 常用struts2标签数据回显防止数据重复提交 1)ognl:Object Graph Navigation Language 简介:ognl工作在视图层,可以简化数据的访问操作 ...
vue 的elementui中select下拉框多选项-multiple属性
vue的select下拉框多选项-multiple属性最近在使用vue-element-admin这个后台管理框架开源模板在做一个管理后台,使用起来其实还挺方便的,大部分的组件源码里面都已经写好了, ...
一行代码回显 LayUI表单数据回显下拉列表select回显
第一步: 要在回显的form表单上面加一个lay-filter属性放在下面以便复制 lay-filter的值可改为自己想要的 <form class="layui-form&q ...
网络中工作组中计算机无法访问或没有选项的解决办法汇总
在网上邻居中点"查看工作组计算机"时显示"workgroup无法访问．您可能没有权限使用网络资源．．．．．此工作组的服务器列表当前无法使用" 我所使用过的方法如 ...
angularJS 修改操作select回显选中的数据
使用 ng-selected 指令 <div class="form-group"><label for="role" class=" ...
html中select标签刷新后不回到默认值而是保持之前选择值
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
php复制重叠字符串,PHP如何在复制字符串中的每个字符后“重复”字符串(恢复字符串)...
嗨,我需要帮助"unduplicating"一个字符串(AKA恢复对字符串的更改).我的 PHP代码中有一个函数,它复制了字符串中的每个字符("Hello"变成 ...

Angularjs 中select回显后重复选项的解决

Angularjs 中select回显后重复选项的解决相关推荐

最新文章

热门文章