Question

即使从下拉列表中选择了值，

$dirty也为假。设置脏标志还有其他选择吗？

Answer 1

您可以结合使用$dirty函数（docs）将输入值设置为ng-change。 EDIT ：我发现使用ui-bootstrap最好使用typeahead-on-select，因为它不适用于ng-change。

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TypeaheadCtrl', function($scope, $http) {

  var _selected;

  $scope.selected = undefined;
  $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];

  $scope.x = {
    User: {
      username: ''
    }
  };
})

.typeahead-demo .custom-popup-wrapper {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  background-color: #f9f9f9;
}

.typeahead-demo .custom-popup-wrapper>.message {
  padding: 10px 20px;
  border-bottom: 1px solid #ddd;
  color: #868686;
}

.typeahead-demo .custom-popup-wrapper>.dropdown-menu {
  position: static;
  float: none;
  display: block;
  min-width: 160px;
  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<body ng-app="ui.bootstrap.demo">
  <script type="text/ng-template" id="customTemplate.html">
    <a>
      <img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
      <span ng-bind-html="match.label | uibTypeaheadHighlight:query"></span>
    </a>
  </script>

  <script type="text/ng-template" id="customPopupTemplate.html">
    <div class="custom-popup-wrapper" ng-style="{top: position().top+'px', left: position().left+'px'}" style="display: block;" ng-show="isOpen() && !moveInProgress" aria-hidden="{{!isOpen()}}">
      <p class="message">select location from drop down.</p>

      <ul class="dropdown-menu" role="listbox">
        <li class="uib-typeahead-match" ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="{{::match.id}}">
          <div uib-typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
        </li>
      </ul>
    </div>
  </script>

  <div class='container-fluid typeahead-demo' ng-controller="TypeaheadCtrl">
    <form name="testForm">
      <h4>Static arrays</h4>
      <pre>Model: {{selected | json}} </pre>
      <input type="text" ng-model="x.User.username" typeahead-on-select='testForm.$setDirty();' uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control" typeahead-min-length="0">
      <input ng-model="x.User.username" required/>
    </form>
    {{testForm.$dirty}}
  </div>
</body>

您当然也可以在控制器内部移动逻辑。我希望这会有所帮助。

形式$ dirty在预输入选择时为假

1 个答案: