Question

HTML内容：

<!---- HTML Content ---->
<div class="container-fluid" ng-app="myApp"><br>

    <div class="row" ng-controller="mainController">
        <div class="col-md-12">
            <div class="panel panel-primary">
                <div class="panel-heading clearfix">
                    <h3 class="panel-title pull-left"><a>Home</a></h3>
                </div>
                <div class="panel-body">
                    <form name="frm" ng-submit="addToDo()">
                        <span><input required type="text" ng-model="NewToDo"></span>
                        <button type="submit">Go</button>
                    </form>
                    <br>
                    <button ng-click="clearlist()">Clear List</button>
                    <br><br>

                    <div class="list-group">
                        <a href="#" class="list-group-item active">List Of To Dos</a>
                        <li href="#" class="list-group-item clearfix" ng-repeat="todo in todos">
                            <div class="col-md-10">
                                <div class="input-group">
                                              <span class="input-group-addon" id="basic-addon1">
                                                <input type="checkbox" ng-model="todo.done">
                                                </span>
                                    <input type="text" class="form-control" aria-describedby="basic-addon1"
                                           ng-model="todo.title" ng-readonly="!edit"/>
                                </div>
                            </div>
                            <div class="text-right col-md-2">
                                <label ng-click="first($index); second()" class="btn btn-info" ng-hide="editorEnabled">Edit</label>
                                <label ng-show="editorEnabled">
                                    <label ng-click="save()" class="btn btn-success">Save</label>
                                    <label ng-click="disableEditor()" class="btn btn-warning">cancel</label>
                                </label>
                                <label class="btn btn-danger" ng-click="delete($index)">Delete</label>
                            </div>
                        </li>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script>
    var myApp = angular.module("myApp", []);
    myApp.controller("mainController", ['$scope', function ($scope) {
        $scope.todos = [
            {'title': 'My First To Do', 'done': false}
        ];

        $scope.addToDo = function () {
            $scope.todos.push({'title': $scope.NewToDo, 'done': false});
            $scope.NewToDo = '';
        }

        $scope.clearlist = function () {
            $scope.todos = $scope.todos.filter(function (item) {
                return !item.done;
            });
        }

        $scope.delete = function (at) {
            $scope.todos.splice(at, 1);
        }

        $scope.second = function () {
            $scope.editorEnabled = true;
        }

        $scope.first = function (edit) {
            //$scope.flag = true;
            console.log(edit);
            $scope.edit = true;
        }

        /*$scope.editorReadOnly = function(){
         $scope.editorReadOnly = true;
         }*/

        $scope.save = function () {
            $scope.editorEnabled = false;
            $scope.edit = !$scope.edit;
        }

        $scope.disableEditor = function () {
            $scope.editorEnabled = false;
        }

    }]);
</script>

Answer 1

您可以这样写：

<div ng-repeat="todo in todos">
    <input type="text" ng-model="todo.title" ng-readonly=!todo.editorEnabled" />
    <button ng-click="todo.editorEnabled = true">Disable me</button>
</div>

<强>更新

您的HTML代码隐藏在您的问题中，因为您没有正确格式化它。我为您提供了一个基本示例：

<li href="#" class="list-group-item clearfix" ng-repeat="todo in todos">
    <div class="col-md-10">
        <div class="input-group">
            <span class="input-group-addon" id="basic-addon1">
                <input type="checkbox" ng-model="todo.done">
            </span>
            <input type="text" class="form-control" aria-describedby="basic-addon1"
                   ng-model="todo.title" ng-readonly="todo.disableEditor"/>
        </div>
    </div>
    <div class="text-right col-md-2">
        <label ng-click="todo.disableEditor = true" class="btn btn-info">Edit</label>
        <label ng-show="!todo.disableEditor">
            <label ng-click="save()" class="btn btn-success">Save</label>
            <label ng-click="disableEditor()" class="btn btn-warning">cancel</label>
        </label>
        <label class="btn btn-danger" ng-click="delete($index)">Delete</label>
    </div>
</li>

您修改过的plunkr：https://jsfiddle.net/oynrxkgv/搜索todo.edit用法，您会看到那里发生了什么。

Answer 2

现在我得到了你的确切问题，

编辑按钮：

<label ng-click="first($index); editText=false;editorEnabled='true'" class="btn btn-info" ng-hide="editorEnabled" >Edit</label>

文字框：

<input type="text" class="form-control" aria-describedby="basic-addon1" ng-model="todo.title" ng-disabled="editText" />

对JS文件中的标志进行了必要的更改。看看这个小提琴。这就是我想要做的事情：

https://jsfiddle.net/8xqv33uy/1/

如何在单击按钮的ng-repeat行中只读输入

2 个答案: