Question

我正在尝试通过双击名称来显示输入字段。这很好用！但是，如果我的put-request成功，我该如何切换回来？我以为我只需将$ scope.edit设置为false但它不起作用。（今天我采取了角度的第一步）

<ul>
    <li ng-repeat="customer in customers">
        <label>
            <input type="checkbox" ng-model="customer.selected"/>
        </label>
        <span ng-hide="edit" ng-dblclick="edit = true;">{{ customer.name }}</span>
        <label ng-show="edit">
            <input type="text" ng-model="customer.name" ng-keyup="editCustomer($index, customer, $event)"/>
        </label>,
        <small ng-bind="customer.created_at"></small>
        <button ng-click="deleteCustomer($index, customer)">-</button>
    </li>
</ul>

控制器：

$scope.editCustomer = function (index, customer, event) {
    // enter
    if (event.keyCode === 13) {
        $http.put('customers/' + customer.id, customer).success(function () {
            // update customer.name binding
            $scope.edit = false;
        })
    } 
    // esc, do nothing and revert
    else if (event.keyCode === 27) {
        $scope.edit = false;
    }
};

或者这种方法可能有更好的解决方案吗？

Answer 1

这是一个常见问题。默认情况下，ng-repeat会创建子级或隔离范围。所以现在您尝试在edit创建的子范围内设置变量ng-repeat，但不在实际控制器的范围内。

但是在你的控制器中，你再次尝试在父范围上设置其假值，而不是在'ng-repeat'的子范围内。要解决此问题，您需要为此变量使用一个对象。

此行为已在此处正确解释：https://github.com/angular/angular.js/wiki/Understanding-Scopes

所以修改你的HTML代码如下：

<ul>
    <li ng-repeat="customer in customers">
        <label>
            <input type="checkbox" ng-model="customer.selected"/>
        </label>
        <span ng-show="!customer.edit" ng-dblclick="customer.edit = true;">{{customer.name}}</span>
        <label ng-show="customer.edit">
            <input type="text" ng-model="customer.name" ng-keyup="editCustomer($event)"/>
        </label>
    </li>
</ul>

您的控制器代码为：

$scope.editCustomer = function (event) {
    var customer = this.customer;    // current customer can be directly accessed via this
    // enter
    if (event.keyCode === 13) {
        $http.put('customers/' + customer.id, customer).success(function () {
            customer.edit = false;
        })
    } 
    // esc, do nothing and revert
    else if (event.keyCode === 27) {
        customer.edit = false;
    }
};

希望这有帮助！

谢谢，
SA

Answer 2

如果要显示和隐藏输入，则必须同时使用ng-hide和ng-show。它不合逻辑但是它在我的控制器中工作的唯一方式，可能是一个错误。

<label ng-show="edit" ng-hide="edit-hide">
  <input type="text" ng-model="customer.name" ng-keyup="editCustomer($index, customer, $event)"/>
</label>


// Show control
$scope.edit = true;
$socpe.edit_hide = false;

// Hide control
$scope.edit = false;
$scope.edit_hide = true;

Answer 3

<ul>
    <li ng-repeat="customer in customers">
        <label>
            <input type="checkbox" ng-model="customer.selected"/>
        </label>
        <span ng-show="!edit" ng-dblclick="edit = true;">{{ customer.name }}</span>
        <label ng-show="edit">
            <input type="text" ng-model="customer.name" ng-keyup="editCustomer($index, customer, $event)"/>
        </label>,
        <small ng-bind="customer.created_at"></small>
        <button ng-click="deleteCustomer($index, customer)">-</button>
    </li>
</ul>

控制器：

$scope.editCustomer = function (index, customer, event) {
    // enter
    if (event.keyCode === 13) {
        $http.put('customers/' + customer.id, customer).success(function () {
            // update customer.name binding
            $scope.edit = false;
        })
    } 
    // esc, do nothing and revert
    else if (event.keyCode === 27) {
        // $scope.edit = false;
    }
};

请记住在启动控制器时设置默认值$ scope.edit = false。

角度应用 - 隐藏在ajax成功上

3 个答案: