2014-07-21 93 views
0

我有兩個下拉列表(ddls)。當頁面加載時,首先ddl被加載數據。用戶可以在第一個ddl中進行選擇,並根據第二個ddl獲取源代碼(每次動態發生)。如何根據動態數據獲取格式化/需要的json數組

低於這些下拉菜單,有添加按鈕。如果用戶在新行中再次單擊添加按鈕,則會出現兩個下拉列表,然後可以應用相同的方案。添加按鈕可以添加更多的行。

在兩個ddls旁邊,有一個刪除按鈕,按下哪個特定的行可以被刪除。

沒問題是我怎麼能得到特定格式的慾望json數組,如下所述。

我想JSON數組這樣....

$scope.project=[{ 
    securityId: "first Dropdown selected value" , 
    contactId:"second Dropdown selected value" 
}] 

(如果僅存在一個行)

爲2行,我要長大小爲$ scope.project慾望2和適當的價值。 對於第n行,$ scope.project的長度應該是n,並帶有適當的值。請檢查您的瀏覽器控制檯。我得到$ scope.project數組,但不是所需的格式。

它可能是非常容易的角戀。我不知道爲什麼我沒有得到解決方案。

http://jsfiddle.net/micronyks/ZwwH7/6/ 

HTML

<html ng-app> 
    <div ng-controller="ctrl"> 

     <div ng-repeat="additional in additionals"> 
     <select ng-model="additional.securityId" ng-change="selectRoles(additional.securityId,additional)" ng-options="w.securityId as w.securityRoleName for w in SecurityRoles"></select> 

     <select ng-model="additional.personId" ng-change="selectperson(additional.personId,additional)" ng-options="w.personId as w.personName for w in additional.Personsddl"></select> 
      <button ng-click="remove($index)">remove</button> 
     </div> 

     <button ng-click="add()">add row</button> 
    </div> 

</html> 

.js文件...

function ctrl($scope) { 

    $scope.additionals=[{}]; 

    $scope.project=[{}]; 

    $scope.SecurityRoles = [{ 
     securityId: 1, 
     securityRoleName: "SuperAdmin" 
    }, { 
     securityId: 2, 
     securityRoleName: "Admin" 
    } 
     , { 
     securityId: 3, 
     securityRoleName: "Guest" 
    }]; 

    $scope.Persons = [{ 
     personId: 1, 
     contactId:1, 
     personName: "john" 
    }, { 
     personId: 2, 
     contactId:1, 
     personName: "jack" 
    },{ personId: 3, 
     contactId:2, 
     personName: "Johnson" 
     },{ personId: 4, 
     contactId:2, 
     personName: "rock" 
     }, 
     { personId: 5, 
     contactId:3, 
     personName: "bank" 

    }]; 
$scope.selectRoles=function(id,additional) 
    { 
    additional.Personsddl=[]; 
     angular.forEach($scope.Persons,function(record){ 

      if(record.contactId==id) 
      { 

       additional.Personsddl.push(record); 


      } 
     }); 


     $scope.project.push({roleId:id}); 

    } 

    $scope.add=function() 
    { 
     $scope.additionals.push({}); 
    } 

    $scope.remove=function($index){ 

     $scope.additionals.splice($index,1); 
    } 



     $scope.selectperson=function(id) 
    { 

     $scope.project.push({contactId:id}); 

     console.log($scope.project); 
    } 
} 

回答

1

請看這裏:http://jsfiddle.net/9pqjN/

HTML:

<html ng-app> 
    <div ng-controller="ctrl"> 
     <p>Project :</p> <pre>{{project |json}}</pre> 

     <div ng-repeat="user in project"> 
      <select ng-model="user.securityId" ng-options="w.securityId as w.securityRoleName for w in SecurityRoles"></select> 
      <select ng-model="user.personId" ng-options="w.personId as w.personName for w in Persons"></select> 
      <button ng-click="remove($index)">remove</button> 
     </div> 
     <button ng-click="add()">add row</button> 
    </div> 

</html> 

js:

function ctrl($scope) { 

    $scope.additionals = []; 

    $scope.project = []; 

    $scope.SecurityRoles = [{ 
     securityId: 1, 
     securityRoleName: "SuperAdmin" 
    }, { 
     securityId: 2, 
     securityRoleName: "Admin" 
    }, { 
     securityId: 3, 
     securityRoleName: "Guest" 
    }]; 

    $scope.Persons = [{ 
     personId: 1, 
     contactId: 1, 
     personName: "john" 
    }, { 
     personId: 2, 
     contactId: 1, 
     personName: "jack" 
    }, { 
     personId: 3, 
     contactId: 2, 
     personName: "Johnson" 
    }, { 
     personId: 4, 
     contactId: 2, 
     personName: "rock" 
    }, { 
     personId: 5, 
     contactId: 3, 
     personName: "bank" 

    }]; 




    $scope.add = function() { 
     $scope.project.push({}); 
    } 

    $scope.remove = function ($index) { 

     $scope.project.splice($index, 1); 
    } 




} 
+0

你再次幫助我。我仍然想知道以前的幫助。當你回到家時,你告訴我解釋你的答案。但你沒有。 只是在開玩笑。非常感謝您的幫助。 – micronyks

+0

@micronyks你好,其實我已經更新了答案,請看這裏http://stackoverflow.com/questions/24848736/json-parsing-in-mvc-4-web-api-with-angularjs – sylwester

1

sylwester差不多。在我的情況下增加了一個過濾器:

<select ng-model="additional.personId" 
     ng-options="w.personId as w.personName for w in Persons | filter:{contactId: additional.securityId}"> 
</select> 

下面是完整的演示http://jsfiddle.net/9DcXA/1/

還要注意,存在有securityId以及contactId輸出JSON,因爲我看你濾波第二滴沒有點基於與人員的contactId匹配的securityId。我想你打算在結果中顯示securityIdpersonId

+0

這兩個答案對我很有用。非常感謝您用小提琴來清晰表達。 – micronyks