Angularjs中select回顯后重復選項的解決-創(chuàng)新互聯(lián)
Angularjs 中select回顯后重復選項的解決
成都創(chuàng)新互聯(lián)公司是專業(yè)的澄海網站建設公司，澄海接單;提供成都網站建設、網站設計,網頁設計,網站設計,建網站,PHP網站建設等專業(yè)做網站服務;采用PHP框架,可快速的進行澄海網站開發(fā)網頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網站,專業(yè)的做網站團隊,希望更多企業(yè)前來合作!（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" : "優(yōu)惠"},
"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": "優(yōu)惠",
"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 >{}</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>{}</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" : "優(yōu)惠"},
"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": "優(yōu)惠",
"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 >{}</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>{}</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 >{}</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>另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。
網頁題目：Angularjs中select回顯后重復選項的解決-創(chuàng)新互聯(lián)
標題路徑：http://aaarwkj.com/article10/cdphdo.html
成都網站建設公司_創(chuàng)新互聯(lián)，為您提供手機網站建設、企業(yè)網站制作、微信公眾號、云服務器、面包屑導航、品牌網站建設
聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)
- 佛山網站制作中如何索取長尾關鍵詞 2022-11-15
- 廣州網站制作中色調的平衡感 2021-04-20
- 包頭企業(yè)網站制作：你知道如何做網站建設方案嗎？ 2021-09-30
- 網站制作學什么這些東西不能忽視 2013-12-06
- 新網站為什么不被搜索引擎收錄 2016-11-06
- 《網站制作》定制網站費用為什么價格那么貴？ 2021-11-18
- 深圳網站制作創(chuàng)意臺燈設計 2014-09-14
- 看不到的也重要網站制作時切莫忽視程序代碼 2022-05-22
- 如何才能找到靠譜的網站制作公司 2021-12-24
- 門戶網站制作如何去規(guī)劃設計 2016-10-26
- 網站制作中導航欄布局的重要性 2021-04-28
- 網站制作方法和步驟 2017-05-31