AngularJs Group和Fill Comboboxes

时间：2015-07-09 10:42:08

标签： json angularjs filtering grouping

我有像这样的Json数据; 

This XML file does not appear to have any style information associated with it. The document tree is shown below.

[{＆＃34; KOD＆＃34;：16105＆＃34; TapuKod＆＃34;：9469416，＆＃34; ParselNo＆＃34;：＆＃34; 48＆＃34;＆＃34; AdaNo＆＃34; ：＆＃34; 125＆＃34;＆＃34; MahalleId＆＃34;：146436，＆＃34;记录＆＃34;：空，＆＃34; RecordDate＆＃34;：空，＆＃34;编辑＆＃34 ;：空，＆＃34; EditDate＆＃34;：空}，{＆＃34; KOD＆＃34;：16106＆＃34; TapuKod＆＃34;：9469417，＆＃34; ParselNo＆＃34;：＆＃ 34; 49＆＃34;＆＃34; AdaNo＆＃34;：＆＃34; 125＆＃34;＆＃34; MahalleId＆＃34;：146436，＆＃34;记录＆＃34;：空，＆＃34 ; RecordDate＆＃34;：空，＆＃34;编辑＆＃34;：空，＆＃34; EditDate＆＃34;：空}，{＆＃34; KOD＆＃34;：16107＆＃34; TapuKod＆＃34 ;：9469187，＆＃34; ParselNo＆＃34;：＆＃34; 5＆＃34;＆＃34; AdaNo＆＃34;：＆＃34; 125＆＃34;＆＃34; MahalleId＆＃34;：146436 ＆＃34;记录＆＃34;：空，＆＃34; RecordDate＆＃34;：空，＆＃34;编辑＆＃34;：空，＆＃34; EditDate＆＃34;：空}，{＆＃34 ; KOD＆＃34;：16108＆＃34; TapuKod＆＃34;：9469418，＆＃34; ParselNo＆＃34;：＆＃34; 50＆＃34;＆＃34; AdaNo＆＃34;：＆＃34; 125＆＃34;＆＃34; MahalleId＆＃34;：146436，＆＃34;记录＆＃34;：空，＆＃34; RecordDate＆＃34;：空，＆＃34;编辑＆＃34;：空，＆ ＃34; EditDate＆＃34;：空}，{＆＃34; KOD＆＃34;：16109＆＃34; TapuKod＆＃34;：9469426，＆＃34; ParselNo＆＃34;：＆＃34; 51＆＃34 ;，＆＃34; AdaNo＆＃34;：＆＃34; 125＆＃34;＆＃34; MahalleId＆＃34;：146436，＆＃34;记录＆＃34;：空，＆＃34; RecordDate＆＃34;：空，＆＃34 ;编辑＆＃34;：空，＆＃34; EditDate＆＃34;：空}，{＆＃34; KOD＆＃34;：16110＆＃34; TapuKod＆＃34;：9469610，＆＃34; ParselNo＆＃34 ;：＆＃34; 53＆＃34;＆＃34; AdaNo＆＃34;：＆＃34; 125＆＃34;＆＃34; MahalleId＆＃34;：146436，＆＃34;记录＆＃34;：空＆＃34; RecordDate＆＃34;：空，＆＃34;编辑＆＃34;：空，＆＃34; EditDate＆＃34;：空}，{＆＃34; KOD＆＃34;：16111＆＃34 ; TapuKod＆＃34;：9469615，＆＃34; ParselNo＆＃34;：＆＃34; 54＆＃34;＆＃34; AdaNo＆＃34;：＆＃34; 125＆＃34;＆＃34; MahalleId＆＃ 34;：146436，＆＃34;记录＆＃34;：空，＆＃34; RecordDate＆＃34;：空，＆＃34;编辑＆＃34;：空，＆＃34; EditDate＆＃34;：空}， {＆＃34; KOD＆＃34;：16112＆＃34; TapuKod＆＃34;：9469188，＆＃34; ParselNo＆＃34;：＆＃34; 6＆＃34;＆＃34; AdaNo＆＃34 ;: ＆＃34; 125＆＃34;＆＃34; MahalleId＆＃34;：146436，＆＃34;记录＆＃34;：空，＆＃34; RecordDate＆＃34;：空，＆＃34;编辑＆＃34; ：空，＆＃34; EditDate＆＃34;：空}，{＆＃34; KOD＆＃34;：16113＆＃34; TapuKod＆＃34;：9469189，＆＃34; ParselNo＆＃34;：＆＃34 ; 7＆＃34;＆＃34; AdaNo＆＃34;：＆＃34; 125＆＃34;＆＃34; MahalleId＆＃34;：146436，＆＃34;记录＆＃34;：空，＆＃34; RecordD吃＆＃34;：空，＆＃34;编辑＆＃34;：空，＆＃34; EditDate＆＃34;：空}，{＆＃34; KOD＆＃34;：16114＆＃34; TapuKod＆＃34; ：9469190，＆＃34; ParselNo＆＃34;：＆＃34; 8＆＃34;＆＃34; AdaNo＆＃34;：＆＃34; 125＆＃34;＆＃34; MahalleId＆＃34;：146436， ＆＃34;记录＆＃34;：空，＆＃34; RecordDate＆＃34;：空，＆＃34;编辑＆＃34;：空，＆＃34; EditDate＆＃34;：空}，{＆＃34; KOD＆＃34;：16115＆＃34; TapuKod＆＃34;：9469191，＆＃34; ParselNo＆＃34;：＆＃34; 9＆＃34;＆＃34; AdaNo＆＃34;：＆＃34; 125＆ ＃34;＆＃34; MahalleId＆＃34;：146436，＆＃34;记录＆＃34;：空，＆＃34; RecordDate＆＃34;：空，＆＃34;编辑＆＃34;：空，＆＃ 34; EditDate＆＃34;：空}，{＆＃34; KOD＆＃34;：16116＆＃34; TapuKod＆＃34;：9468741，＆＃34; ParselNo＆＃34;：＆＃34; 2＆＃34; ＆＃34; AdaNo＆＃34;：＆＃34; 126＆＃34;＆＃34; MahalleId＆＃34;：146436，＆＃34;记录＆＃34;：空，＆＃34; RecordDate＆＃34 ;:空，＆＃34;编辑＆＃34;：空，＆＃34; EditDate＆＃34;：空}，{＆＃34; KOD＆＃34;：16117＆＃34; TapuKod＆＃34;：9468742，＆＃ 34; ParselNo＆＃34;：＆＃34; 1＆＃34;＆＃34; AdaNo＆＃34;：＆＃34; 127＆＃34;＆＃34; MahalleId＆＃34;：146436，＆＃34;记录和＃34;：空，＆＃34; RecordDate＆＃34;：空，＆＃34;编辑＆＃34;：空，＆＃34; EditDate＆＃34;：空}，{＆＃34; KOD＆＃34 ;: 16118＆＃34;轻击uKod＆＃34;：9468745，＆＃34; ParselNo＆＃34;：＆＃34; 1＆＃34;＆＃34; AdaNo＆＃34;：＆＃34; 128＆＃34;＆＃34; MahalleId＆＃34 ;：146436，＆＃34;记录＆＃34;：空，＆＃34; RecordDate＆＃34;：空，＆＃34;编辑＆＃34;：空，＆＃34; EditDate＆＃34;：空}，{ ＆＃34; KOD＆＃34;：16119＆＃34; TapuKod＆＃34;：9468748，＆＃34; ParselNo＆＃34;：＆＃34; 2＆＃34;＆＃34; AdaNo＆＃34;：＆ ＃34; 128＆＃34;＆＃34; MahalleId＆＃34;：146436，＆＃34;记录＆＃34;：空，＆＃34; RecordDate＆＃34;：空，＆＃34;编辑＆＃34 ;:空，＆＃34; EditDate＆＃34;：空}，{＆＃34; KOD＆＃34;：16120＆＃34; TapuKod＆＃34;：9468933，＆＃34; ParselNo＆＃34;：＆＃34; 3＆＃34;＆＃34; AdaNo＆＃34;：＆＃34; 128＆＃34;＆＃34; MahalleId＆＃34;：146436，＆＃34;记录＆＃34;：空，＆＃34; RecordDate＆ ＃34;：空，＆＃34;编辑＆＃34;：空，＆＃34; EditDate＆＃34;：空}，{＆＃34; KOD＆＃34;：16121＆＃34; TapuKod＆＃34 ;: 9623908，＆＃34; ParselNo＆＃34;：＆＃34; 4＆＃34;＆＃34; AdaNo＆＃34;：＆＃34; 128＆＃34;＆＃34; MahalleId＆＃34;：146436，＆ ＃34;记录＆＃34;：空，＆＃34; RecordDate＆＃34;：空，＆＃34;编辑＆＃34;：空，＆＃34; EditDate＆＃34;：空}，{＆＃34; KOD＆ ＃34;：16122＆＃34; TapuKod＆＃34;：9623909，＆＃34; ParselNo＆＃34;：＆＃34; 5＆＃34;＆＃34; AdaNo＆＃34;：＆＃34; 128＆＃ 34;，＆＃34;玛哈lleId＆＃34;：146436，＆＃34;记录＆＃34;：空，＆＃34; RecordDate＆＃34;：空，＆＃34;编辑＆＃34;：空，＆＃34; EditDate＆＃34;：空}，{＆＃34; KOD＆＃34;：16123＆＃34; TapuKod＆＃34;：9468950，＆＃34; ParselNo＆＃34;：＆＃34; 6＆＃34;＆＃34; AdaNo＆＃34 ;：＆＃34; 128＆＃34;＆＃34; MahalleId＆＃34;：146436，＆＃34;记录＆＃34;：空，＆＃34; RecordDate＆＃34;：空，＆＃34;编辑＆＃ 34;：空，＆＃34; EditDate＆＃34;：空}，{＆＃34; KOD＆＃34;：16124＆＃34; TapuKod＆＃34;：9695996，＆＃34; ParselNo＆＃34;：＆ ＃34; 7＆＃34;＆＃34; AdaNo＆＃34;：＆＃34; 128＆＃34;＆＃34; MahalleId＆＃34;：146436，＆＃34;记录＆＃34;：空，＆＃ 34; RecordDate＆＃34;：空，＆＃34;编辑＆＃34;：空，＆＃34; EditDate＆＃34;：空}，{＆＃34; KOD＆＃34;：16125＆＃34; TapuKod＆＃ 34;：9693613，＆＃34; ParselNo＆＃34;：＆＃34; 1＆＃34;＆＃34; AdaNo＆＃34;：＆＃34; 129＆＃34;＆＃34; MahalleId＆＃34 ;: 146436，＆＃34;记录＆＃34;：空，＆＃34; RecordDate＆＃34;：空，＆＃34;编辑＆＃34;：空，＆＃34; EditDate＆＃34;：空}，{＆＃ 34; KOD＆＃34;：16126＆＃34; TapuKod＆＃34;：9470332，＆＃34; ParselNo＆＃34;：＆＃34; 1＆＃34;＆＃34; AdaNo＆＃34;：＆＃34 ; 130＆＃34;＆＃34; MahalleId＆＃34;：146436，＆＃34;记录＆＃34;：空，＆＃34; RecordDate＆＃34;：空，＆＃34;编辑＆＃34;：空， ＆＃ 34; EditDate＆＃34;：空}，{＆＃34; KOD＆＃34;：16127＆＃34; TapuKod＆＃34;：9468983，＆＃34; ParselNo＆＃34;：＆＃34; 10＆＃34; ＆＃34; AdaNo＆＃34;：＆＃34; 130＆＃34;＆＃34; MahalleId＆＃34;：146436，＆＃34;记录＆＃34;：空，＆＃34; RecordDate＆＃34 ;:空，＆＃34;编辑＆＃34;：空，＆＃34; EditDate＆＃34;：空}，]

并且有2个这样的组合框;

Here

我想用AdaNo填充AdaNo ComboBox，但不想重复相同的no。然后，当我选择任何AdaNo时，它将使用parselNo填充ParselNo组合框，其中AdaNo = selectedAdaNo。

我的ApiController：

 public string GetParselFromMahalleKod(int id)
    {


        List<TapuParselModel> parselList = TapuModule.GetParselListFromMahalleTapuKod(id);



        string jsonResult = SConvert.SerializeJSON(parselList);
        return jsonResult;
    }

在tapuController.js; 

 $scope.getParsels = function () {
        TapuParselApi.all($scope.selectedMahalle).success(function (response) {
            $scope.Parseller = angular.fromJson(response);
        })

和像这样的索引; 

 <div>
            Ada No:<select data-ng-model="adaNo">
                <option value="{{parsel.AdaNo}}" data-ng-repeat="parsel in Parseller">{{parsel.AdaNo}}</option>
            </select>
            Parsel No:<select data-ng-model="parselNo">
                <option value="{{parsel.ParselNo}}" data-ng-repeat="parsel in Parseller">{{parsel.ParselNo}}</option>
            </select>
            <button data-ng-click="downloadZeminsFromZeminArg()">Sorgula</button>
        </div>

我能用一个Json做到吗？ 注意：我使用angularJs。所以也许有角度的方法：）

我该怎么办？

1 个答案:

答案 0 :(得分：0)

请参阅下面的工作代码，您可以在这里找到解决方案。

<html ng-app="app">
<head>
    <title>Index</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-controller="ctrl">
    <table>
        <tr>
            <td>Ada No:</td>
            <td>
                <select ng-model="AdaNos" ng-options="item.AdaNo for item in items | unique:'AdaNo'">
                </select>               
            </td>
        </tr>
        <tr>
            <td>Parsel No:</td>
            <td>
                <select ng-model="ParselNos" ng-options="item.ParselNo for item in items | filter:AdaNos.AdaNo:true" | unique:'ParselNo'>
                </select>               
            </td>
        </tr>   
    </table>

    <script>

        var app = angular.module("app", []).controller("ctrl", function($scope){
            var data = [{"Kod":16105,"TapuKod":9469416,"ParselNo":"48","AdaNo":"125","MahalleId":146436,"Record":null,"RecordDate":null,"Edit":null,"EditDate":null},{"Kod":16106,"TapuKod":9469417,"ParselNo":"49","AdaNo":"125","MahalleId":146436,"Record":null,"RecordDate":null,"Edit":null,"EditDate":null},{"Kod":16107,"TapuKod":9469187,"ParselNo":"5","AdaNo":"125","MahalleId":146436,"Record":null,"RecordDate":null,"Edit":null,"EditDate":null},{"Kod":16108,"TapuKod":9469418,"ParselNo":"50","AdaNo":"125","MahalleId":146436,"Record":null,"RecordDate":null,"Edit":null,"EditDate":null},{"Kod":16109,"TapuKod":9469426,"ParselNo":"51","AdaNo":"125","MahalleId":146436,"Record":null,"RecordDate":null,"Edit":null,"EditDate":null},{"Kod":16110,"TapuKod":9469610,"ParselNo":"53","AdaNo":"125","MahalleId":146436,"Record":null,"RecordDate":null,"Edit":null,"EditDate":null},{"Kod":16111,"TapuKod":9469615,"ParselNo":"54","AdaNo":"125","MahalleId":146436,"Record":null,"RecordDate":null,"Edit":null,"EditDate":null},{"Kod":16112,"TapuKod":9469188,"ParselNo":"6","AdaNo":"125","MahalleId":146436,"Record":null,"RecordDate":null,"Edit":null,"EditDate":null},{"Kod":16113,"TapuKod":9469189,"ParselNo":"7","AdaNo":"125","MahalleId":146436,"Record":null,"RecordDate":null,"Edit":null,"EditDate":null},{"Kod":16114,"TapuKod":9469190,"ParselNo":"8","AdaNo":"125","MahalleId":146436,"Record":null,"RecordDate":null,"Edit":null,"EditDate":null},{"Kod":16115,"TapuKod":9469191,"ParselNo":"9","AdaNo":"125","MahalleId":146436,"Record":null,"RecordDate":null,"Edit":null,"EditDate":null},{"Kod":16116,"TapuKod":9468741,"ParselNo":"2","AdaNo":"126","MahalleId":146436,"Record":null,"RecordDate":null,"Edit":null,"EditDate":null},{"Kod":16117,"TapuKod":9468742,"ParselNo":"1","AdaNo":"127","MahalleId":146436,"Record":null,"RecordDate":null,"Edit":null,"EditDate":null},{"Kod":16118,"TapuKod":9468745,"ParselNo":"1","AdaNo":"128","MahalleId":146436,"Record":null,"RecordDate":null,"Edit":null,"EditDate":null},{"Kod":16119,"TapuKod":9468748,"ParselNo":"2","AdaNo":"128","MahalleId":146436,"Record":null,"RecordDate":null,"Edit":null,"EditDate":null},{"Kod":16120,"TapuKod":9468933,"ParselNo":"3","AdaNo":"128","MahalleId":146436,"Record":null,"RecordDate":null,"Edit":null,"EditDate":null},{"Kod":16121,"TapuKod":9623908,"ParselNo":"4","AdaNo":"128","MahalleId":146436,"Record":null,"RecordDate":null,"Edit":null,"EditDate":null},{"Kod":16122,"TapuKod":9623909,"ParselNo":"5","AdaNo":"128","MahalleId":146436,"Record":null,"RecordDate":null,"Edit":null,"EditDate":null},{"Kod":16123,"TapuKod":9468950,"ParselNo":"6","AdaNo":"128","MahalleId":146436,"Record":null,"RecordDate":null,"Edit":null,"EditDate":null},{"Kod":16124,"TapuKod":9695996,"ParselNo":"7","AdaNo":"128","MahalleId":146436,"Record":null,"RecordDate":null,"Edit":null,"EditDate":null},{"Kod":16125,"TapuKod":9693613,"ParselNo":"1","AdaNo":"129","MahalleId":146436,"Record":null,"RecordDate":null,"Edit":null,"EditDate":null},{"Kod":16126,"TapuKod":9470332,"ParselNo":"1","AdaNo":"130","MahalleId":146436,"Record":null,"RecordDate":null,"Edit":null,"EditDate":null},{"Kod":16127,"TapuKod":9468983,"ParselNo":"10","AdaNo":"130","MahalleId":146436,"Record":null,"RecordDate":null,"Edit":null,"EditDate":null},]
            $scope.items = data;
        });

        app.filter('unique', function() {
           return function(collection, keyname) {
              var output = [], 
                  keys = [];

              angular.forEach(collection, function(item) {
                  var key = item[keyname];
                  if(keys.indexOf(key) === -1) {
                      keys.push(key);
                      output.push(item);
                  }
              });

              return output;
           };
        });

    </script>
</body>
</html>
相关问题
最新问题