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。

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

<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();
});

更改模型时{AngingJS触发更改

1 个答案: