AngularJS在更改模型时引发更改

AngularJS fire ng-change when changing a model

本文关键字：模型 AngularJS      更新时间：2023-09-26

我有一个看起来像这样的表单：

<div class="col-xs-12 col-lg-4">
    <form name="deliveryForm" ng-class="{ 'has-error': deliveryForm.$invalid && !deliveryForm.contact.$pristine }">
        <div class="form-group">
            <div class="btn-group">
                <label class="btn btn-default" ng-model="controller.order.lines[0].forDelivery" btn-radio="true" ng-change="controller.setDeliveryDetails()">For delivery</label>
                <label class="btn btn-default" ng-model="controller.order.lines[0].forDelivery" btn-radio="false" ng-change="controller.findCollectionPoints()">For collection</label>
            </div>
        </div>
        <div class="form-group" ng-if="!controller.order.lines[0].forDelivery">
            <label class="control-label">Contact</label>
            <input class="form-control" type="text" name="contact" ng-model="controller.model.contact" ng-change="controller.setDeliveryDetails()" autocomplete="off" required />
            <input type="hidden" name="collectionPoint" ng-model="controller.model.collectionPoint" ng-change="controller.setDeliveryDetails()" required />
        </div>
        <div class="form-group">
            <label class="control-label">Instructions</label>
            <input class="form-control" type="text" name="instructions" ng-model="controller.model.instructions" ng-change="controller.setDeliveryDetails()" autocomplete="off" />
        </div>
        <div class="form-group">
            <button class="btn btn-default" type="button" ui-sref="saveOrder.lines">Back</button>
            <a class="btn btn-primary pull-right" ng-if="deliveryForm.$valid" ui-sref="saveOrder.confirm">Continue</a>
        </div>
    </form>
</div>

正如您所看到的，如果我的第一行是而不是用于交付，那么我将显示联系人输入和隐藏的collectionPoint输入。再往下一点，我有一个链接，可以更改集合点：

<a href="#" ng-click="controller.model.collectionPoint = point"></a>

我希望隐藏的输入能检测到更改并启动控制器.setDeliveryDetails（）方法，但它似乎不起作用。有什么办法我能做到这一点吗？

ng更改是在对输入而非模型进行更改时触发的。

您可以在ng-click:上运行controller.setDeliveryDetails()

<a href="#" ng-click="controller.model.collectionPoint = point; controller.setDeliveryDetails()"></a>

或者在controller.model.collectionPoint 上的控制器中设置手表

$scope.$watch(angular.bind(this, function () {
  return this.model.collectionPoint;
}), function (newVal) {
  controller.setDeliveryDetails();
});
相关文章：