使用ng-click在单个数组中保存多个表对象

时间:2017-12-13 12:28:53

标签: javascript jquery angularjs

我在桌子上有3个colums。我的表中没有required字段。
当我单击“保存”按钮时,每行应该作为单独的对象保存在单个数组中。
1.如果文件未上传,则可以为空。
2.选中复选框,true,否则为false
3.但名称应该在每个对象中。



var app = angular.module('myApp', [])
app.controller('myController', function($scope) {
    $scope.listName = [{
            'name': 'aaa'
        },{
            'name': 'bbb'
        },{
            'name': 'ccc'
        }];
    $scope.saveDetails = function(doc) {
        if ($('#status').is(':checked')) {
            doc.status = 'true'
        } else {
            doc.status = 'false'
        }
        console.log(doc)
    };
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController" ng-init="init()">
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>file</th>
                <th>status</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat='doc in listName'>
                <td>{{doc.name}}</td>
                <td>
                    <input type="file" ng-model="doc.file" />
                </td>
                <td>
                    <input type="checkbox" ng-model="doc.status" />
                </td>
            </tr>
        </tbody>
    </table>
    <button ng-click="saveDetails(doc)">save</button>
</div>
&#13;
&#13;
&#13;

有任何帮助吗?谢谢!!

1 个答案:

答案 0 :(得分:1)

你不需要jquery方法 尝试下面的内容:

&#13;
&#13;
 var app = angular.module('myApp', [])
  app.controller('myController', function($scope) {
    $scope.listName = [{
            'name': 'aaa',
             file: "",
            status:false
        },{
            'name': 'bbb',
             file: "",
            status:false
        },{
            'name': 'ccc',
             file: "",
            status:false
        }];
    $scope.saveDetails = function(doc) {
        
        console.log($scope.listName)
    };
})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController" ng-init="init()">
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>file</th>
                <th>status</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat='doc in listName'>
                <td>{{doc.name}}</td>
                <td>
                    <input type="file" ng-model="doc.file" />
                </td>
                <td>
                    <input type="checkbox" ng-model="doc.status" />
                </td>
            </tr>
        </tbody>
    </table>
    <button ng-click="saveDetails(doc)">save</button>
</div>
&#13;
&#13;
&#13;