Angularjs中select回显后重复选项的解决-创新互联
Angularjs 中select回显后重复选项的解决
成都创新互联公司是专业的澄海网站建设公司，澄海接单;提供成都网站建设、网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行澄海网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!（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 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 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 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 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>另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
网页题目：Angularjs中select回显后重复选项的解决-创新互联
标题路径：https://www.cdcxhl.com/article10/cdphdo.html
成都网站建设公司_创新互联，为您提供手机网站建设、企业网站制作、微信公众号、云服务器、面包屑导航、品牌网站建设
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联
- 佛山网站制作中如何索取长尾关键词 2022-11-15
- 广州网站制作中色调的平衡感 2021-04-20
- 包头企业网站制作：你知道如何做网站建设方案吗？ 2021-09-30
- 网站制作学什么这些东西不能忽视 2013-12-06
- 新网站为什么不被搜索引擎收录 2016-11-06
- 《网站制作》定制网站费用为什么价格那么贵？ 2021-11-18
- 深圳网站制作创意台灯设计 2014-09-14
- 看不到的也重要网站制作时切莫忽视程序代码 2022-05-22
- 如何才能找到靠谱的网站制作公司 2021-12-24
- 门户网站制作如何去规划设计 2016-10-26
- 网站制作中导航栏布局的重要性 2021-04-28
- 网站制作方法和步骤 2017-05-31