Angularjs在表格行中的输入和跨度值之间切换

Question

我的 html 中有以下代码，我想在其中切换输入和跨度字段。在表格行中。

<table>
 <tbody ng-repeat="(i, cont) in char.items">
<tr>
    <td>
    <div>
    <a ng-click="choose()">
    <input type="text" ng-model="item.desc" ng-show="sho==1" />
    <span ng-show="sho==0">{{item.type}}</span></a>
    </div>
    </td>
</tr>
</tbody>
</table>
<div  ng-click="addRows(char)" style="WIDTH: 974px">Add Row</div>

在我的控制器中我有

 app.controller("testCtrl", function($scope) {
    $scope.sho=0;

  $scope.addRows = function(char) {
        if (typeof char.items == 'undefined') {
            char.items = [];

        }
        char.items.push({ des: '', type: '', price: '', charge__id: ''});
    };

    $scope.choose= function() {
    //some values are retrieved than I want to toggle so it shows the 
    //want to set sho=1 so input is hidden instead the span vaue is shown 
    $scope.sho=1; 
    };

});

问题是当我设置 $scope.sho=1;它在表格的所有行中显示跨度值。 当我添加一个新行时，我只想显示输入框，而其他行已经插入了 span 值。 请让我知道如何为表格中的每一行设置 ng-show。 谢谢

Answer 1

由于ng-repeat 为每个项目创建了一个子范围，您可以在指令中利用它。该指令的父作用域将是由ng-repeat 创建的子作用域，因此与其他转发器隔离

将您的 choose 和 sho 移出主控制器并将它们放入指令范围。

<div editable>
   <a ng-click="choose()"></a>
   <input type="text" ng-model="item.desc" ng-show="!sho" />
   <span ng-show="sho">{{item.type}}</span>
</div>

app.directive('editable', function () {
    return function (scope, elem, attrs) {
        scope.sho = true;
        scope.choose = function () {
            scope.sho = !scope.sho;
        }
    }
});

这是最简单的版本，无需进入指令内的孤立范围，也无需考虑连续多个可编辑项等因素。

对于更绝缘的功能丰富的版本，可以考虑使用更强大的指令，例如 x-editable

Answer 2

我无法理解您的代码的实际用途。但我的猜测是让您将当前项目传递给选择函数并在项目本身上设置一个标志。如果你修改你的 ng-show 和 ng-hide 属性来响应每个项目上的这个标志，我想你会达到你的目标。

 <a ng-click="choose(item)">
   <input type="text" ng-model="item.desc" ng-show="item.sho==1" />
   <span ng-show="item.sho==0">{{item.type}}</span></a>
 </div>

在你的选择函数中你会做这样的事情：

$scope.choose= function(item) {
  item.sho=1; 
};

这只是一个疯狂的猜测，因为我不太清楚你想要完成什么。

Answer 3

立即想到的两件事是：

1 - 使用函数传入项目并让函数接受参数。

<a ng-click="choose(sho)">

然后在你的控制器中

$scope.choose= function(sho) {
  sho = 1;
};

2 - 只需让 ng-click 将值设置为 1..

<a ng-click="sho = 1">