如何在指令的情况下更改下拉列表的默认文本，并对指令应用所需的验证

How to change default text of dropdown in case of directives and apply required validation on directive

本文关键字：指令 应用 文本 验证 下拉列表 情况下 默认      更新时间：2023-09-26

实际上我有两个问题。我已经为下拉列表创建了一个指令，所以我不必重写代码。我的默认选项是"选择"，但我想更改默认选项。如果它的位置是下拉列表，那么它的文本应该是"选择位置"，如果它是部门，那么它应该通过在指令中传递文本来"选择部门"。另一个问题是如何对下拉指令进行验证。如果我将其应用于指令html，那么它将应用于所有下拉指令。但我想把它应用到一些指令中。这是我的密码。dropdown.html

<select name="ngModel" id="ngModel" ng-model="ngModel" ng-options="option.Id as option.Name for option in ddmodel">
    <option value="">Select</option>
</select>

dropdown.directive.js

(function (app) {
    'use strict';
    app.directive('dropdown', dropdown);
    function dropdown() {
        return {
            restrict: 'E',
            scope: {
                ddmodel: '=',
                ngModel: '=',
                message: "@",
                id: '@'
            },
            templateUrl: '/App/directives/dropdown.html',
            link: function (scope, element, attrs) {
                scope.isOpened = false;
             
               
            }
        };
    }
})(angular.module("IIU"));

在我的代码中使用指令

  <dropdown message="Select Location" ddmodel="DDCollections.LocationList" id="LocationId" name="LocationId" ng-model="staffContract.LocationId">
                            </dropdown>

我可以通过消息属性传递消息。我们将不胜感激。

使用此代码

var app = angular.module('test', []);
app.controller('testController', function($scope) {
  $scope.LocationList = [{
    Id: 1,
    Name: 'Location one .. '
  }, {
    Id: 2,
    Name: 'Location two .. '
  }, {
    Id: 3,
    Name: 'Location three .. '
  }, ];
  $scope.DepartmentList = [{
    Id: 1,
    Name: 'Department one .. '
  }, {
    Id: 2,
    Name: 'Department two .. '
  }, {
    Id: 3,
    Name: 'Department three .. '
  }, ];
});
app.directive('dropdown', dropdown);
function dropdown() {
  return {
    restrict: 'E',
    scope: {
      ddmodel: '=',
      ngModel: '=',
      message: "@",
      id: '@',
      validate:'@',
    },
    template: '<select ng-required="{{ validate }}"  name="ngModel" id="ngModel" ng-model="ngModel"' +
      'ng-options="option.Id as option.Name for option in ddmodel">' +
      '<option value=""> {{ message }} </option>' +
      '</select>',
      
    link: function(scope, element, attrs) {
      scope.isOpened = false;
    }
  };
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="test">
  <div ng-controller="testController">
    <form >
    <h3>
      dropdown location without error
    </h3>
    <dropdown message="Select Location" ddmodel="LocationList" id="LocationId" name="LocationId" ng-model="LocationId"   validate='true'>
    </dropdown>
    <h3>
      dropdown department with error
    </h3>
    <dropdown message="Select Department" ddmodel="DepartmentList" id="DepartmentId" name="DepartmentId" ng-model="DepartmentId"   validate='false'>
    </dropdown>
      <br>
      <br>
      
      <input type="submit">
      </form>
  </div>
</div>

1-要用您传递的message替换默认值，只需将默认选项文本替换为message的值，即

<select name="ngModel" id="ngModel" ng-model="ngModel" 
            ng-options="option.Id as option.Name for option in ddmodel">
    <option value=""> {{ message }} </option>
</select>

2-要为特定选择启用错误，您可以传递另一个变量来指示禁用或禁用errors，基于该变量，您可以决定使用类似ng-if的东西来显示或隐藏errors，如

<!-- show-errors true or false -->
<dropdown message="Select Location" ddmodel="LocationList" 
    id="LocationId" name="LocationId" ng-model="LocationId" show-errors="false">
</dropdown>
.....
restrict: 'E',
scope: {
  ddmodel: '=',
  ngModel: '=',
  message: "@",
  id: '@',
  showErrors: "="
},
.....
<select name="ngModel" id="ngModel" ng-model="ngModel" ng-options="option.Id as option.Name for option in ddmodel">
    <option value=""> {{ message }} </option>
</select>
<span ng-if="showErrors">errors</span>

这是一个简单的演示

相关文章：