Question

我有两个下拉菜单（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数组，但不是必需的格式。

角度爱好者可能很容易。我不知道为什么我没有得到解决方案。

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

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




}

Answer 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匹配的第二个下拉列表进行过滤1}}人。我想你的意思是在结果中显示contactId和securityId。

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

2 个答案: