顯示具體的索引輸入並隱藏其他

我陷入了一個問題。我已經添加了一個標籤，並在ng-repeat中輸入。當用戶單擊編輯時，我想顯示輸入並隱藏標籤，並且其工作正常。但當用戶單擊新按鈕時，它會顯示新輸入，但不顯示加工。顯示具體的索引輸入並隱藏其他

的Html

<tr ng-repeat="personalDetail in personalDetails"> 
    <td> <label ng-if="personalDetail.Sname!=''" for="settings" > {{personalDetail.Sname}}</label> 
     <input ng-hide="$index" 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> 
     <span style="cursor: pointer" ng-click="Edit(personalDetail.Settings,$index)" class="glyphicon glyphicon-edit"></span> 
     <span style="cursor: pointer; padding-left:10px;" ng-click="Remove($index)" class ="glyphicon glyphicon-trash" ></span> 
    </td> 
               </tr>

這裏是角

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

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

來源

2017-08-07 Aftab khan

你的新按鈕在哪裏？當你添加新行時發生了什麼？ – Vivz

–

當我點擊新按鈕時，它顯示標籤數據我想顯示輸入@Vivz –

我創建一個的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>

來源

2017-08-07 11:11:06 user4858836

這種設計只用非常簡單的情況下工作。

我建議分開查看輸入。在表格中顯示數據。

輸入形式

ALT1：把與名稱表格上方一個簡單的形式以及設定作爲輸入字段。還有一個保存並取消按鈕。用戶可以直接開始添加。保持編輯按鈕，但當你按下它。使用當前行數據填充上面的表單。更改保存按鈕更新。

Alt2：使用ng-repeat-start和ng-repeat-end爲編輯創建可擴展行。在ng-repeat-end裏面，你可以放置一個表單。您將獲得很多驗證消息的空間。

來源

2017-08-07 12:23:12

顯示具體的索引輸入並隱藏其他

回答

相關問題