4

私はフォームを持っていて、Angular js とブートストラップを使用しています。検証はすべて設定されており、先行入力を導入するまで正常に動作します。値を選択すると、検証はトリガーされません。

先行入力から値を選択する場合でもフィールドを検証するにはどうすればよいですか?

それを参照してください: JS Fiddle Here

コード...

<div ng-app="myApp" ng-controller="myCtrl">
    <form action="" name="myForm">
        <input type="text" name="one" ng-model="one" ng-valid-func="validator" />
        <div class="warning" ng-show="!myForm.one.$valid">
            <i class="icon-warning-sign"></i> One needs to be longer
        </div>
        <input type="text" name="two" ng-model="two" ng-valid-func="validator" class="typeahead" />
        <div class="warning" ng-show="!myForm.two.$valid">
            <i class="icon-warning-sign"></i> Two needs to be longer
        </div>
    </form>
</div>

と..

input.ng-invalid{
    background-color: #fdd !important;    
}

input.ng-valid{
    background-color: #dfd !important;    
}

と...

var app = angular.module('myApp', [])

var myCtrl = function($scope){

    $scope.one = ""
    $scope.two = ""

    $scope.validator = function(val){
        return val.length > 3
    }

}

$(function(){
    $('.typeahead').typeahead({
        source: ['animal','alphabet','alphabot!','alfalfa']
    })
})


app.directive('ngValidFunc', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$parsers.unshift(function(viewValue) {
        if (attrs.ngValidFunc && scope[attrs.ngValidFunc] && scope[attrs.ngValidFunc](viewValue, scope, elm, attrs, ctrl)) {
          ctrl.$setValidity('custom', true);
        } else {
          ctrl.$setValidity('custom', false);
        }
        return elm.val()
      });
    }
  };
});
4

1 に答える 1

3

alfrescian が言うように、AngularJS にはtypeahead.

を参照してくださいFiddle。

まだいくつかの問題を解決する必要がありますが、それはあなたが望んでいるようです

 <div ng-app="myApp" ng-controller="myCtrl">
<form action="" name="myForm">
    <input type="text" name="one" ng-model="one" ng-valid-func="validator" />
    <div class="warning" ng-show="!myForm.one.$valid">
        <i class="icon-warning-sign"></i> One needs to be longer
    </div>
   <input type="text" ng-model="two" ng-valid-func="validator" typeahead="suggestion for suggestion in option($viewValue)"/>
    <div class="warning" ng-show="!myForm.two.$valid">
        <i class="icon-warning-sign"></i> Two needs to be longer
    </div>
  </form>   
</div>

あなたのJS

var app = angular.module('myApp', ['ui.bootstrap'])

var myCtrl = function($scope, limitToFilter){

$scope.one = ""
$scope.two = ""

 $scope.option = function(value) {
       console.log(value);    
  return limitToFilter($scope.options, 10);   
 };

$scope.options = ['animal','alphabet','alphabot!','alfalfa'];   


$scope.validator = function(val){
    return val.length > 3
}

$scope.run = function(value){
    console.log(value);
};             

}

app.directive('ngValidFunc', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
  ctrl.$parsers.unshift(function(viewValue) {
    if (attrs.ngValidFunc && scope[attrs.ngValidFunc] && scope[attrs.ngValidFunc](viewValue, scope, elm, attrs, ctrl)) {
      ctrl.$setValidity('custom', true);
    } else {
      ctrl.$setValidity('custom', false);
    }
    return elm.val()
  });
  }
 };
});

物事を整理するのに役立つことを願っています

于 2013-09-26T16:26:11.717 に答える