Question

我的域名Bar有Group个。以下代码允许用户选择Bar（输出到{{selected.bar.name}}）。用户应选择Bar。

如果Group只有一个Bar，则Bar会显示在顶层（step-0），否则用户可以深入查看{{1}然后从那里选择Group（Bar）。

在下面的代码中，step-1和Bar 1是他们群组中唯一的代码，而Bar 2和Bar 3共享一个群组Bar 4。< / p>

除了以下顺序之外，一切都很顺利：

选择Group 3
选择任意Group 3
点击上一页
选择任何其他Bar
再次选择Bar不会再次带您到Group 3; step-1事件未被触发。

ng-change

(function(ng) {
  'use strict';
  ng.module('awesome', [])
    .controller('BarController', [
      '$scope',
      function($scope) {
        $scope.bars = [{
          "id": 1,
          "name": "Bar 1",
          "group": "Group 1"
        }, {
          "id": 2,
          "name": "Bar 2",
          "group": "Group 2"
        }, {
          "id": 3,
          "name": "Bar 3",
          "group": "Group 3"
        }, {
          "id": 4,
          "name": "Bar 4",
          "group": "Group 3"
        }];

        $scope.currentTab = 'step-0';
        $scope.previousTab = null;

        $scope.goBack = function() {
          $scope.currentTab = $scope.previousTab;
          $scope.previousTab = null;
        }

        $scope.groupedBars = _.groupBy($scope.bars, 'group');

        $scope.selected = {}

        $scope.availableGroupedBars = $scope.groupedBars;

        $scope.availableBars = $scope.bars;

        $scope.groupSelected = function(group) {
          console.log('groupSelected');
          $scope.currentTab = 'step-1';
          $scope.previousTab = 'step-0';
          $scope.availableBars = group;
        }
      }
    ]);
})(window.angular);

返回<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.1/underscore-min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="awesome"> <div ng-controller="BarController"> <div ng-include="currentTab"></div> Selected bar name: {{selected.bar.name}} <button ng-show="previousTab" ng-click="goBack()">Previous</button> </div> <script type="text/ng-template" id="step-0"> <ul> <li ng-repeat="(key, group) in availableGroupedBars"> <label ng-switch="group.length"> <span ng-switch-default>{{key}}</span> <input ng-switch-default type="radio" name="group" ng-model="selected.group" ng-value="group" ng-change="groupSelected(selected.group)" /> <span ng-switch-when="1">{{group[0].name}}</span> <input ng-switch-when="1" type="radio" name="group" ng-model="selected.bar" ng-value="group[0]" /> </label> </li> </ul> </script> <script type="text/ng-template" id="step-1"> <ul> <li ng-repeat="bar in availableBars"> <label> {{bar.name}} <input type="radio" name="bar" ng-model="selected.bar" ng-value="bar" required /> </label> </li> </ul> </script> </div>后如何才能使ng-change Group 3事件发生？

Answer 1

由于没有任何变化，因此不会触发更改事件。您只有一个组，当您返回时仍然选择该组。它永远保持选中状态，即$scope.selected.group的值永远不会改变，无论你选择什么单选按钮。

仅当输入值的更改导致将新值提交给模型时，才会评估ngChange表达式。

我强烈建议您重新考虑一下您的方法。如果您不想，那么您可以在步骤0中向条形图添加ng-change，并在选择条形图时清除$scope.selected.group。

$scope.clearGroup = function() {
  $scope.selected.group = null;
};

<input ng-switch-when="1" type="radio" name="group"
 ng-model="selected.bar" ng-value="group[0]"
 ng-change="clearGroup()" />

在ng-includes之间切换时，ng-change不会触发

1 个答案: