Angularjs 中select回顯後重複選項的解決

時間 2020-08-09

標籤 angularjs select 重複選項解決欄目 AngularJS 简体版

原文原文鏈接

Angularjs 中select回顯後重複選項的解決php

（1）Angularjs 中select回顯代碼,records和categoryValueList都是後臺返回的html

<!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。正確結果以下所示：
angularjs

（4）修改後的select回顯代碼，以下所示。app

<!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>

解決後的顯示結果:
ide

（5）說明：代碼中主要使用瞭如下代碼：google

<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中查找指定內容並選中的問題。code

（6）題外：ng-if的使用，過濾知足指定條件的內容cdn

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。