1

入力のプロンプトを管理する AngularJS ディレクティブを作成しようとしてい<select>ます。3 つの異なるモードは次のとおりです。

  1. 空白のオプションを許可しない
    • これはデフォルトの動作です
  2. テキストのない空白のオプションを許可する
    • allow-blank="true"ディレクティブの設定により達成
  3. プロンプト テキスト付きの空白のオプションを許可する
    • allow-blank以外の値に設定することで実現"true"

ただし、空白のオプションは使用できません。

プランカーのデモ

テンプレート

<select ng-options="tag.id as tag.name for tag in myTags">
  <option ng-if="allowBlank === 'true'" value=""></option>
  <option ng-if="allowBlank && allowBlank !== 'true'" value="">{{allowBlank}}</option>
</select>

指令

myApp.directive('mySelector', ['$http', function($http) {
  return {
    templateUrl:'my-selector-template.html',
    restrict: 'E',
    scope: {
      allowBlank: '@?'
    },
    replace: true,
    controller: function ($scope) {
      $scope.myTags = [
        {"name":"aliquam in","id":1},
        {"name":"massa velit","id":2},
        {"name":"nec vestibulum","id":3}
      ];
    }
  };
}]);
4

1 に答える 1