Question

我试图以角度构建待办事项列表应用。当您添加新项目时，它将添加到表格内的输入框（默认情况下，我将其设置为禁用），并在该输入旁边添加编辑链接。单击“编辑”后，输入框将启用。（我得到了它使用此代码（编辑）。

我的问题是如何替换ng-click =＆＃34; editable =！editable＆＃34;使用ng-click =＆＃34; edit（）＆＃34;。我试着写这个编辑功能，但我不能让它工作。请帮忙。 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重复的特定变量？

1 个答案: