Question

我仍然是一个新手并且学习angularjs这很有趣也很有趣。我曾经使用过以下的plunker链接。 http://plnkr.co/edit/WiXEVIN6K63O50FhdzO2?p=preview

上面的链接显示了2选择选项的验证。如果未选择其中任何一个下拉值，则提交按钮将不会处于活动状态。

此代码如下所示。

的index.html

<div ng-controller="preOpSelectController">
<form name="form">


  <select ng-model="bar.foo" ng-options="foo as foo for foo in fooarray"  required>
    <option ng-if="fooarray.length > 1" value="" selected>Choose</option>
  </select>


  <select ng-model="bar.foo1" ng-options="foo as foo for foo in fooarray1"  required>
    <option ng-if="fooarray.length > 1" value="" selected>Choose</option>
  </select>
  <input type="submit" ng-disabled="form.$invalid" />


</form>

的script.js

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

app.controller('preOpSelectController', function($scope, $timeout) {
$scope.bar = {};
$scope.bar1 = {};

$scope.fooarray = [ 1, 2, 3, 4, 5, 6 ];
$scope.fooarray1 = [ 12, 21, 32, 43, 54, 64];

$scope.trigger = function() {
 $timeout(function() {
   $('form.bad select').trigger('change');
 })
}
});

第二个文件是这个 - http://plnkr.co/edit/yya3vMoaTFiONU9wrFVw?p=preview

这显示了如何验证输入类型文件。问题是我需要将此文件与第一个文件合并，并将所有三个输入一起显示。即输入类型文件和2下拉选择。仅当选择了所有3个文件值时，提交按钮才应处于活动状态。

我遇到困难，因为第一个代码的函数在普通控制器文件中，而输入类型文件在一个指令中。我无法在第二个链接的指令中合并第一个文件的代码。

请有人在这里帮助我。

Answer 1

苛刻的评论确实帮助我克服了一些障碍。我最终完成了它并将它们合并在一起，它就像一个魅力。 http://plnkr.co/edit/CYnhNUnT6aKdCwB65j5N 请参考上面的plunker。

这是HTML代码

 <form name="form" novalidate>

  <input type="file" ng-model="document" valid-file required>
  <select ng-model="activeItem.content" ng-options="foo as foo for foo in contentarray"  required>
    <option ng-if="contentarray.length > 1" value="" selected>Choose</option>
  </select>


  <select ng-model="activeItem.content1" ng-options="foo as foo for foo in content1array"  required>
    <option ng-if="content1array.length > 1" value="" selected>Choose</option>
  </select>
  <input type="submit" ng-disabled="form.$invalid && (!form.$valid && 'invalid' || 'valid')"/>


</form>

脚本文件如下。

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

app.controller('preOpSelectController', function($scope, $timeout) {
$scope.content = {};
$scope.content1 = {};

$scope.contentarray = [ 1, 2, 3, 4, 5, 6 ];
$scope.content1array = [ 12, 21, 32, 43, 54, 64];

$scope.trigger = function() {
 $timeout(function() {
   $('form.bad select').trigger('change');
 })
   }
});


preOpSelect.directive('validFile', function () {
return {
    require: 'ngModel',
    link: function (scope, el, attrs, ngModel) {
        ngModel.$render = function () {
            ngModel.$setViewValue(el.val());
        };

        el.bind('change', function () {
            scope.$apply(function () {
                ngModel.$render();
            });
        });
    }
};
});

PS-如果你想知道我为什么使用输入类型文件的指令，这就是答案我想ngModelController当前不支持input type = file。因此，可以使用自定义指令解决问题。

谢谢大家。希望它在将来帮助某人。

验证输入类型文件＆＃39;和＆＃39;下拉选项＆＃39;内部形式（使用angularjs）可能吗？

1 个答案: