Question

我有以下HTML标记，它是Bootstrap输入组的一部分。我要做的是根据点击的选项更新菜单选择器上显示的文本。所以我最初设置为{{searchBy}}的文本，然后我在ng-click上调用一个函数来更新它。最初按钮没有显示任何内容，因为searchBy未定义，但我希望它显示第一个选项。如果我单击其中一个菜单选项，则会在范围内更新searchBy，但会立即将其更改回未定义。

<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">{{ searchBy }} <span class="caret"></span></button>
<ul class="dropdown-menu">
    <li><a ng-href="#" ng-click="setSearchBy('number', 'Receipt')">Receipt</a></li>
    <li><a ng-href="#" ng-click="setSearchBy('freightBill', 'BOL')">BOL</a></li>
    <li><a ng-href="#" ng-click="setSearchBy('customerOrderNumber', 'Sales Order')">Sales Order</a></li>
    <li><a ng-href="#" ng-click="setSearchBy('purchaseOrderNumber', 'PO')">PO</a></li>
    <li><a ng-href="#" ng-click="setSearchBy('trailer', 'Trailer')">Trailer</a></li>
</ul>

这是我的控制器。我在searchBy属性上设置了一个手表，它只是将旧值和新值输出到控制台，当我点击菜单选项时，我可以看到它被调用两次。

angular.module('webappApp')
  .controller('ReceiptsCtrl', function ($scope, receipts) {

    $scope.setSearchBy = function(searchByProperty, searchBy) {
      $scope.searchBy = searchBy||'Receipt';
      $scope.searchByProperty = searchByProperty||'number';
    };

    $scope.$watch('searchBy', function(newValue, oldValue) {
      console.debug(oldValue + ' -> ' + newValue);
    });
  });

无法根据ng-click更新角度视图

0 个答案: