使用angularjs推送带有输入字段的空行

Question

我有一张表，其中包含编辑、删除和添加选项。我的问题是当我单击添加按钮时想要添加带有空输入字段的行。我为此写了下面的代码。我应该怎么做才能添加具有空输入值的空行。

My code

    <div ng-controller="AppKeysCtrl">
<button ng-click="add()">
Add
</button>
<table class="table table-hover mytable">
    <thead>
        <tr>
            <th></th>
            <th>Created</th>
            <th>App Key</th>
            <th>Name</th>
            <th>Level</th>
 http://jsfiddle.net/Thw8n/155/#update           <th>Active</th>
            <th>Edit</th>
        </tr>
    </thead>
    <tbody>
        <tr data-ng-repeat="entry in appkeys" data-ng-class="{danger:!entry.active}">
        <td>{{$index + 1}}</td>
        <td>{{entry.timestamp | date:'mediumDate'}}</td>
        <td>{{entry.appkey}}</td>
        <td>
            <span data-ng-hide="editMode">{{entry.name}}</span>
            <input type="text" data-ng-show="editMode" data-ng-model="entry.name" data-ng-required />
        </td>
        <td>
            <span data-ng-hide="editMode">{{entry.level}}</span>
            <select class="form-control" name="entry.level" data-ng-model="entry.level" data-ng-show="editMode">
                <option value="3">3 - Developer Access - [Temporary]</option>
                <option value="2">2 - Standard Tool Access - [Default]</option>
                <option value="1">1 - Administrative Access - [Admin Section Only]</option>
            </select>
        </td>
        <td>
            <span data-ng-hide="editMode">{{entry.active && 'Active' || 'Inactive'}}</span>
            <select class="form-control" name="entry.active" data-ng-model="entry.active" data-ng-show="editMode">
                <option value="true">Active</option>
                <option value="false">Inactive</option>
            </select>
        </td>
        <td>
            <button type="submit" data-ng-hide="editMode" data-ng-click="editMode = true; editAppKey(entry)" class="btn btn-default">Edit</button>
            <button type="submit" data-ng-show="editMode" data-ng-click="editMode = false" class="btn btn-default">Save</button>
            <button type="submit" data-ng-show="editMode" data-ng-click="editMode = false; cancel($index)" class="btn btn-default">Cancel</button>
        </td>
</tr>
</tbody>
</table>
    <pre>newField: {{newField|json}}</pre></br></br>
    <pre>appkeys: {{appkeys|json}}</pre>
</div>

app = angular.module("formDemo", []);

function AppKeysCtrl($scope, $http, $location) {
    var tmpDate = new Date();

          $scope.newField = [];
          $scope.editing = false;

     $scope.appkeys = [
         { "appkey" : "0123456789", "name" : "My new app key", "created" : tmpDate },
         { "appkey" : "abcdefghij", "name" : "Someone elses app key", "created" : tmpDate }
     ];

    $scope.editAppKey = function(field) {
        $scope.editing = $scope.appkeys.indexOf(field);
        $scope.newField[$scope.editing] = angular.copy(field);
    }

    $scope.saveField = function(index) {
        //if ($scope.editing !== false) {
            $scope.appkeys[$scope.editing] = $scope.newField;
            //$scope.editing = false;
        //}       
   };

    $scope.cancel = function(index) {
        //if ($scope.editing !== false) {
            $scope.appkeys[index] = $scope.newField[index];
            $scope.editing = false;
        //}       
    };

    $scope.add = function () {
            var entry = {};
            //$scope.goals.push(goal);
            $scope.appkeys.push(entry);
        };
}

angular.element(document).ready(function() {
    angular.bootstrap(document, ["formDemo"]);
});

我有一个问题，当我单击添加空行时，正在添加具有 ng-hide 属性的表单字段。我想用每列的新输入框动态添加行。我该怎么办？请帮忙。

Answer 1

这很简单。您需要将具有空白值的对象推送到您的数组中。

下面是代码：

控制器

$scope.add = function () {   
      $scope.appkeys.push({appkey : '', name : '', created : '' });
};

上面的代码只会添加一行。我已经更新了你的 JSFiddle 以获得你想要的输出。

请通过给定的链接。

http://jsfiddle.net/Thw8n/570/

Answer 2

您需要粘贴以下代码：

   $scope.add = function () {

           $scope.appkeys.push({appkey : '', name : '', created : '' });
    };

Answer 3

您可以在 appkey 数组中推送具有空属性的对象：

var tempObject = {
    "appkey":"",
    "name":"",
    "created":""
};
$scope.appkeys.push(tempObject);