AngularJS: non può cambiare il tipo di ingresso

Question

Whenver Ho un'espressione angolare come valore da input s' type, non funzionerà:

<input ng-model="model" type="{{'number'}}"> 

I valori numerici vengono convertiti in stringhe e caselle di controllo non lo farà lavorare affatto

http://jsfiddle.net/punund/NRRj7/3/

Answer 1

Non è possibile modificare il tipo di ingresso in modo dinamico in quanto IE non consente questo e AngularJS deve essere compatibile con tutti i browser. Quindi, anche se potresti vedere il tipo modificato visualizzato nel codice sorgente, AngularJS non lo raccoglierà: il tipo viene valutato solo una volta e non può essere modificato.

Si prega di notare che la stessa restrizione si applica a jQuery: jQuery change input type

solamente opzioni per i tipi dinamici sono o una direttiva personalizzato (dove è possibile scaricare un modello dinamico o preparare DOM on-the-fly) oppure usando ng-include includere include partial dove il tipo di input è un valore statico.

Answer 2

Non è possibile modificare il tipo di input in modo dinamico in alcun browser e quindi non è possibile utilizzare l'istruzione di input singolo dinamico. Si lascia usare l'istruzione condizionale per la creazione di elementi in cui type è codificato.

Utilizzare la direttiva ng-switch on in cui è possibile confrontare lo type e creare elementi in base alla corrispondenza condizione. Per esempio:

<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> 

In questo esempio si indica lo script angolare per confrontare elem.eleType utilizzando ng-switch on in seconda div contro il tipo cioè attuale, il testo, la password ed e-mail nel tag di ingresso (rispetto usando ng-switch-when, e solo questo elemento di input è creare in cui la condizione corrisponde, il resto verrà ignorato

Answer 3

sì è possibile ... almeno adesso :)

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'; 
    }; 
}]); 

origine: http://codepen.io/gymbry/pen/fJchw/

UPDATE 17/04/2015:

Ho cambiato casualmente versione angolare supra Codepen e questo sembra funzionare dalla versione 1.0. 2 ... Spero che questo aiuto ...

Answer 4

<input type="text" ng-model="myModel" ng-if="inputType === 'text'"/> 
<input type="password" ng-model="myModel" ng-if="inputType === 'password'"/> 

Questo funziona per me.

Answer 5

Ecco una piccola estensione della risposta di @ vidriduch. In questo caso sto usando un modello di oggetti 'config' della forma {type:"password", value:"topsecret"}, e la visualizzazione in questo modo:

<input type="{{config.type}}" ng-model="config.value"> 

Idealmente mi potrebbe cambiare l'oggetto di configurazione, come richiesto, e utilizzare lo stesso elemento di input di modificare qualsiasi configurazione registra con il tipo/valore corrispondente.Il mio modo originale di passare record è stato quello di chiamare la funzione seguente campo applicativo:

$scope.newRecord = function (newcfg) { 
    $scope.config = newcfg; 
}; 

Tuttavia, a volte ottenuto errori di conversione o reclami sulla convalida. Questo è in Chrome 47. Non mi piace davvero passare da un testo all'altro, ad esempio. Il browser sembrava raccogliere il cambiamento di valore prima del cambio di tipo, o vv.

Ho risolto questo costringendo il modello (e quindi il tipo) a ripristinare tra le modifiche.

$scope.newRecord = function (newcfg) { 
    $scope.config = {}; //clear the model object 
    $timeout(function() { 
     $scope.config = newcfg; 
    }, 0); //zero delay needed 

};

Questa potrebbe non essere una soluzione ideale, ma illustra un "trucco" che altri potrebbero provare.

Answer 6

<input type="{{showPassword?'text':'password'}}" class="form-control" name="password" placeholder="Enter password" ng-model="register.regData.password"> 

ha lavorato per me ..