如何根据动态数据获取格式化/需要 json 数组答案

【问题标题】：how to get formatted/require json array as per dynamic data如何根据动态数据获取格式化/需要 json 数组
【发布时间】：2017-10-02 20:43:38
【问题描述】：

我有两个下拉菜单（ddls）。当页面加载时，第一个 ddl 会加载数据。用户可以在第一个 ddl 中做出选择，然后根据第二个 ddl 填充源（每次动态发生）。

在这些下拉菜单下方，有添加按钮。如果用户在新行中再次单击添加按钮，则会出现两个下拉菜单，然后适用相同的场景。通过添加按钮可以添加更多行。

除了两个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 数组，但不是必需的格式。

对于 Angular 爱好者来说可能很容易。我不知道为什么我没有得到解决方案。

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);
    }
}

【问题讨论】：

标签： angularjs

【解决方案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);
    }




}

【讨论】：

你再次帮助了我。我仍然想知道以前的帮助。你让我在你回家时解释你的答案。但你没有。只是在开玩笑。非常感谢您的帮助。
@micronyks 嗨，其实我已经更新了答案，请看这里stackoverflow.com/questions/24848736/…

【解决方案2】：

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/

另外请注意，在输出 json 中包含 securityId 和 contactId 是没有意义的，因为我看到您正在根据 securityId 与 Persons 的 contactId 匹配过滤第二个下拉列表。我想您的意思是在结果中显示 securityId 和 personId。

【讨论】：

这两个答案对我都有用。非常感谢你用小提琴说清楚。