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

我无法理解您的代码实际使用的内容。但我的猜测是你将当前项目传递给choose函数并在项目本身上设置一个标志。如果您修改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">

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

3 个答案: