Question

我想在单击此值时编辑值，但是当我这样做时，它会编辑行的所有值，而不仅仅是特定的键。这是我的代码：

<table>

<tbody ng-repeat="(key,value) in row.entity.subData"><tr ng-repeat="item in value" >
<td   >
  <span ng-hide="row.entity.editing(item)" ng-click="row.entity.editItem(item)">{{item}}</span>
<button ng-show="row.entity.editing(item)">save</button>
  </td>
</tr></tbody></table>

和javascript代码：

row.entity.editItem = function (item) {
    row.entity.editing=function (item) {
    return true; 
  }
}

当我点击值时，我希望此值为按钮，但结果会将所有值返回到按钮

Answer 1

因此，根据您提供的代码，您有一个对象：row.entity。 subData ，其中的值甚至包含项的数组。

我假设您的目标是单击一个单元格（项）或行（ subData ）。

但是，您正在更改键＃34; row.entity。编辑＆＃34;单击一个单元格时为true。此变量只有1个引用 - 因此ng-repeat中的每个项目都会发生变化并受到点击的影响。

您需要更改每个row.entity。 subData [key] 中的变量，而不是row.entity。*。

解决这个问题：我建议您更改数据结构。您应该使用两个值将对象嵌套在数组中：

row.entity.subData = [{  isShown:true,  data: [...] }, ...]

数据键是您最初在数组中使用的键。

isShown键确定ng-if条件。

＆＃13;

<table>
  <tbody ng-repeat="object in row.entity.subData">
  
    <!-- if you are hiding the whole row, you click logic should exist on the row level-->
    <!-- depending on your dataset size, it is a better practice to use ng-if in a table -->
    
    <tr ng-if="object.isShown" 
        ng-click="object.isShown = !object.isShown" 
        ng-repeat="item in object.data" >
      <td >
        <span>
             {{item}}
        </span>
      <!-- For this save button, you'd have to clarify with me what  -->
      <!-- it is you wish to accomplish after clicking it,  -->
      <!-- do you want to change the cell or the row -->
          <button ng-show="object.isShown" ng-click="save(object)">
              save
          </button>
        </td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 2

为了在ng-repeat中显示或隐藏特定项目，我建议将数据对象格式化为：

angular.foreach(data, function(value){
     value.isVisible=false;
};

然后，您可以通过将isVisible的值更改为您想要的内容来显示或隐藏您要编辑的项目的按钮。

<table>
    <tbody><tr ng-repeat="item in data" >
    <td>
      <span ng-hide="!item.isVisible" ng-click="row.editItem(item)">{{item}}</span>
    <button ng-show="item.isVisible">save</button>
      </td>
    </tr></tbody></table>

我觉得我很乐意祝你好运:)。

Answer 3

as a solution that i found for this

function myCtrl($scope) {

  
   $scope.items = [{
        name: "item #1",
        id:4
        
    }
    ];

    $scope.editItem = function (value,$index) {
         if($index==0){
         $scope.editing =function ($index) {
       if($index==0){
       return true;
       }
        }
        $scope.backup = angular.copy(value);
         }
         if($index==1){
         $scope.editing =function ($index) {
       if($index==1){
       return true;
       }
        }
        $scope.backup = angular.copy(value);
         }
        
    }

    $scope.doneEditing = function (value,$index) {
    if($index==0){
         $scope.editing =function ($index) {
       if($index==0){
       return false;
       }
        }
        delete $scope.backup;
         }
         if($index==1){
         $scope.editing =function ($index) {
       if($index==1){
       return false;
       }
        }
        delete $scope.backup;
         }
       
    };
    $scope.Cancel = function (value,$index) {
     if($index==0){
         $scope.editing =function ($index) {
       if($index==0){
       return false;
       }
        }
        this.value = angular.copy($scope.backup);
        delete $scope.backup;
         }
         if($index==1){
         $scope.editing =function ($index) {
       if($index==1){
       return false;
       }
        }
         this.value = angular.copy($scope.backup);
        delete $scope.backup;         }
       
    };
  
}

.container {
    margin-top:10px;
    font-family:arial;
}
input:focus {
    //change more attributes, if you want.
}
input {
    border:none;
    background-color:transparent;
}
.container header {
    padding-bottom:20px;
    border-bottom:1px solid black;
}
ul, input, .container {
    padding:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<!DOCTYPE html>
<div ng-app ng-controller="myCtrl" class="container">
        <table>
        <tr ng-repeat="(key,value) in items[0]">
           <td>{{key}} </td>
           <td>
                <span  ng-hide="editing($index)"  > {{value}} <button  ng-click="editItem(value,$index)">Edit</button></span>
                <input ng-show="editing($index)" ng-model="value"  autofocus />
                <button ng-show="editing($index)" ng-click="doneEditing(value,$index)">Save</button>
                 <button ng-show="editing($index)" ng-click="Cancel(value,$index)">Cancel</button>
            </td>
        </tr>
         
        </table>
   
</div>

如何使用angularjs更新每个键的特定值

3 个答案: