angular 在 ajax 成功时应用 ng-hide

Question

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

<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-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 2

<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。

Answer 3

这是一个常见问题。默认情况下 ng-repeat 创建一个子范围或独立范围。所以现在你试图在 ng-repeat 创建的子范围内设置一个变量 edit 但不在你的实际控制器的范围内。

但是在您的控制器中，您再次尝试在父作用域而不是 `ng-repeat' 的子作用域上设置它的 false 值。要解决此问题，您需要为此变量使用一个对象。

此行为在此处得到了正确解释：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

angular 在 ajax 成功时应用 ng-hide

angular apply ng-hide on ajax success

javascript

ajax

angularjs