如何编写函数以针对 ng 禁用 ng 重复内的特定变量？

Question

我正在尝试在 angular 中构建待办事项列表应用程序。当您添加新项目时，它将添加到 table 内的输入框（默认情况下，我将其设置为禁用），并在该输入旁边添加编辑 link 。单击“编辑”后，输入框将启用。（我用这段代码（编辑）得到了它。

我的问题是如何将 ng-click="editable=!editable" 替换为 ng-click="edit()"。我试图编写该编辑功能，但我无法让它工作。请帮忙。 My code on jsfiddle

非常感谢。

<body ng-app="shoppingList">
<div  ng-controller="mainController">
    <h1>My Shopping List</h1>
    <form class="form-inline" ng-submit="addItem()">
        <div class="form-group">
        <input type="text" ng-model="newItem">
        </div>
        <input type="submit" value="Add">   
    </form>
    <div>
        <table>
            <thead>
                <tr>
                    <th>Item</th>
                    <th>Edit</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in items track by $index">
                    <td><input ng-disabled="!editable" type="text" value="{{item}}"></td>
                    <td ng-click="editable=!editable">Edit</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>  
<script>
(function(){
    var app = angular.module('shoppingList',[]);
    app.controller('mainController',function($scope){
        $scope.items=[];
        $scope.addItem = function(){
            $scope.items.push($scope.newItem);
        };

    $scope.edit = function(){
    // i need to move editable=!editable into this function
    // but i don't know how to do that
    }

    });

}());
</script>

Answer 1

您可以保存 todo 项目的可编辑属性，然后像这样使用它。

$scope.addItem = function(){
    $scope.items.push({text: $scope.newItem,editable:false});
}; 

$scope.edit = function(item){    
   item.editable = !item.editable; 
   console.log(item)   
}
$scope.save = function(item){
  console.log("saved")     
   item.editable = !item.editable; 
 }

html

<tr ng-repeat="item in items track by $index">
 <td><input ng-disabled="!item.editable" ng-blur="save(item)" type="text" value="{{item.text}}"></td>
<td ng-click="edit(item)">Edit</td>
</tr>

我认为这是最简单的方法，但总有更好的方法。让我们知道。什么是 ngBlur

如何编写函数以针对 ng 禁用 ng 重复内的特定变量？

how to write function to target specific variable for ng disable that inside ng repeat?

angularjs

angularjs-ng-repeat

angularjs-ng-disabled