Question

我的html文件中嵌入了一个简单的嵌套json，我希望使用表单动态插入一些数据。

我能够将数据插入父级别但无法插入子级别。我做错了什么？

以下是代码：

<div class="container" ng-app="myApp" ng-controller="myCtrl">
        <label>Enter Data</label>
        <input ng-model="name" type="text">
        <input ng-model="rollno" type="number">
        <input ng-model="id" type="text">
        <button ng-click="addData(data)">Enter Data</button>
        <table class="table table-bordered">
            <tr>
                <th>Sr No</th>
                <th>Name</th>
                <th>Roll No</th>
                <th>Subjects</th>
                <th>Delete</th>
            </tr>
            <tr ng-repeat="data in myData">
                <td>{{$index+1}}</td>
                <td>{{data.name}}</td>
                <td>{{data.rollno}}</td>
                <td ng-repeat="subject in data.subjects">{{subject.id1}}, {{subject.id2}}</td>
                <td><a href="" ng-click="removeData($index)">remove</a></td>
            </tr>
        </table>
        </div>
        <script>
            var app = angular.module('myApp',[]);
            app.controller('myCtrl',function($scope){
                $scope.myData =[{"name":"Jon","rollno":123,"subjects":[{"id1":"Maths","id2":"Hindi"}]},{"name":"Ron","rollno":234,"subjects":[{"id1":"English","id2":"Hindi"}]}];
                $scope.addData = function(data){
                    $scope.myData.push({name:$scope.name,rollno:$scope.rollno,id1:$scope.id1}); 
                }
                $scope.removeData = function(index){
                    $scope.myData.splice(index, 1);
                }
            });
        </script>

Answer 1

如果您尝试使用addData函数插入主题，则可以执行以下操作。在html中添加那些ng-models

    <input ng-model="name" type="text">
    <input ng-model="rollno" type="number">
    <input ng-model="id" type="text">
    <input ng-model="subid1" type="text"/>
    <input ng-model="subid2" type="text"/>

在js

         $scope.addData = function(data){
        var arrData = {name:$scope.name,rollno:$scope.rollno,subjects:[{id1:$scope.subid1,id2:$scope.subid2 }]};
        $scope.myData.push(arrData);
    }

Angularjs - 无法动态推送子项

1 个答案: