-1

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

我的问题是如何用 ng-click="edit()" 替换 ng-click="editable=!editable"。我试图编写那个编辑功能，但我无法让它工作。请帮忙。 我在 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>
4

1 回答 1

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

于 2016-11-18T01:37:09.543 回答