更改模型時AngularJS觸發ng-change

Question

我有一個看起來像這樣的表格：

<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輸入。 再往下一點，我有一個更改collectionPoint的鏈接：

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

我希望發生的事情是隱藏的輸入將檢測到更改並觸發controller.setDeliveryDetails（）方法，但是它似乎不起作用。 有辦法嗎？

Answer 1

當更改輸入而不是輸入模型時，將觸發ng-change。

您可以執行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();
});