input
の値として Angular 式があるときはいつでもtype
、それは機能しません:
<input ng-model="model" type="{{'number'}}">
数値は文字列に変換され、チェックボックスはまったく機能しません。
input
の値として Angular 式があるときはいつでもtype
、それは機能しません:
<input ng-model="model" type="{{'number'}}">
数値は文字列に変換され、チェックボックスはまったく機能しません。
はい、できます...少なくとも今:)
HTML:
<section ng-app="myApp" ng-controller="mainCtrl">
<input type="{{inputType}}" placeholder="Put your password" />
<input type="checkbox" id="checkbox" ng-model="passwordCheckbox" ng-click="hideShowPassword()" />
<label for="checkbox" ng-if="passwordCheckbox">Hide password</label>
<label for="checkbox" ng-if="!passwordCheckbox">Show password</label>
</section>
<script src="http://code.angularjs.org/1.2.13/angular.min.js"></script>
JS:
var myApp = angular.module('myApp', []);
myApp.controller('mainCtrl', ['$scope', function( $scope ){
// Set the default value of inputType
$scope.inputType = 'password';
// Hide & show password function
$scope.hideShowPassword = function(){
if ($scope.inputType == 'password')
$scope.inputType = 'text';
else
$scope.inputType = 'password';
};
}]);
ソース: http://codepen.io/gymbry/pen/fJchw/
2015 年 4 月 17 日更新:
上記の Codepen で Angular のバージョンをランダムに変更しましたが、これはバージョン 1.0.2 から動作するようです ... このヘルプを願っています ...
IEはこれを許可しておらず、AngularJSはクロスブラウザー互換である必要があるため、入力のタイプを動的に変更することはできません。したがって、変更されたタイプがソースコードに表示されている場合でも、AngularJSはそれを取得しません。タイプは一度だけ評価され、変更することはできません。
同じ制限がjQueryにも適用されることに注意してください:jQueryは入力タイプを変更します
動的タイプのオプションは、カスタムディレクティブ(動的テンプレートをダウンロードするか、DOMをオンザフライで準備できる)、またはng-include
入力タイプが静的値であるインクルードパーシャルを含めるために使用するオプションのみです。
どのブラウザーでも入力タイプを動的に変更することはできないため、動的な単一の入力ステートメントを使用することはできません。type
ハードコーディングされた要素の作成に条件文を使用する必要があります。
条件一致に基づいて要素をng-switch on
比較および作成できるディレクティブを使用します。type
例えば:
<div class="form-group" ng-repeat="elem in formElements">
<div class="col-lg-12" ng-switch on="elem.eleType">
<input ng-switch-when="text" type="text" id="{{elem.id}}" name="{{elem.id}}" class="{{elem.class}}" placeholder="{{elem.placeholder}}" popover-trigger="focus" popover="{{elem.popoverText}}">
<input ng-switch-when="password" type="password" id="{{elem.id}}" name="{{elem.id}}" class="{{elem.class}}" placeholder="{{elem.placeholder}}" popover-trigger="focus" popover="{{elem.popoverText}}">
<input ng-switch-when="email" type="email" id="{{elem.id}}" name="{{elem.id}}" class="{{elem.class}}" placeholder="{{elem.placeholder}}" popover-trigger="focus" popover="{{elem.popoverText}}">
</div>
</div>
この例では、Angular スクリプトに 2 番目の div のelem.eleType
使用ng-switch on
を実際のタイプ、つまり入力タグのテキスト、パスワード、および電子メールと比較するように指示しています (を使用して比較するとng-switch-when
、条件が一致する場所でその入力要素のみが作成され、残りは無視されます。
<input type="text" ng-model="myModel" ng-if="inputType === 'text'"/>
<input type="password" ng-model="myModel" ng-if="inputType === 'password'"/>
これは私にとってはうまくいきます。
これは@vidriduchの答えを少し拡張したものです。この場合、フォームのモデル オブジェクト 'config' を使用し、次の{type:"password", value:"topsecret"}
ように表示します。
<input type="{{config.type}}" ng-model="config.value">
理想的には、必要に応じて構成オブジェクトを変更し、同じ入力要素を使用して、一致するタイプ/値を持つ構成レコードを編集できます。レコードを切り替える最初の方法は、以下のスコープ関数を呼び出すことでした:
$scope.newRecord = function (newcfg) {
$scope.config = newcfg;
};
ただし、変換エラーや検証に関する苦情が時々ありました。これは Chrome 47 にあります。たとえば、テキストから日付への切り替えが本当に好きではありませんでした。ブラウザは、タイプまたは vv の変更前に値の変更を検出したようです。
これを解決するには、変更の合間にモデル (およびタイプ) を強制的にリセットしました。
$scope.newRecord = function (newcfg) {
$scope.config = {}; //clear the model object
$timeout(function() {
$scope.config = newcfg;
}, 0); //zero delay needed
};
これは理想的な解決策ではないかもしれませんが、他の人が経験する可能性のある「落とし穴」を示しています。