Question

我遇到了问题。我在ng-repeat中添加了一个标签和输入。当用户点击编辑时我想显示输入并隐藏标签及其工作正常。但是当用户点击新按钮时，它会显示新输入但是它不起作用

HTML

$scope.addNew = function (personalDetails) {
            $scope.personalDetails.push({

                'Sname': "",
                'Settings': "",
            });

这是角度

{{1}}

Answer 1

我为此创建了一个JSFiddle。 try this JSFiddle

JS：

var app = angular.module("myApp", []); 
app.controller("myCtrl", function($scope) {

 $scope.personalDetails = [ {'Sname': "firsName",
                           'Settings': "firstSettings"},
                           {'Sname': "secondName",
                           'Settings': "secondSettings"},
                           {'Sname': "thirdName",
                           'Settings': "thirdSettings"},];
                           $scope.addNew = function () {
        $scope.personalDetails.push({

            'Sname': "new",
            'Settings': "new",
        });}
});

HTML

<table>
<tr ng-repeat="personalDetail in personalDetails">
<td> <label ng-show="!personalDetail.edit || personalDetail.edit=false" 
  for="settings" > {{personalDetail.Sname}}</label>
  <input  ng-show="personalDetail.edit"  type="text" ng-
 model="personalDetail.Sname" />
</td>
<td><label    data-val="{{personalDetail.Settings}}"   for="desc" >
{{personalDetail.Settings}}</label>
   <input   Style="display:none" data-val="{{personalDetail.Settings}}"  ng-
model="personalDetail.Settings" type="text" value="
{{personalDetail.Settings}}"  />
</td>
 <td> 
   <button  style="cursor: pointer"  ng-
     click="personalDetail.edit=true">edit</button>

  </td>
   </tr>
   </table>

<button  style="cursor: pointer"  ng-click="addNew()" >new</button>

Answer 2

此设计仅适用于非常简单的情况。

我建议将视图与输入分开。在表格中显示数据。

输入表单

Alt1：在表格上方放一个简单的表单，其名称和设置为输入字段。还有一个“保存并取消”按钮。用户可以直接开始添加。按住编辑按钮但按下它时。使用当前行数据填充上面的表单。更改“保存”按钮更新。

Alt2：使用ng-repeat-start和ng-repeat-end创建可扩展的行进行编辑。在ng-repeat-end里面你可以放置一个表格。您将获得大量验证消息的空间。

显示特定索引输入并隐藏其他索引

2 个答案: