angularjs: Nie można zmienić typ wejścia

Question

whenver mam kątowym wyrażenie jako wartość do input „s type, to nie będzie działać:

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

wartości numeryczne zamieniony na smyczki i wyboru nie będzie w ogóle działać.

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

Answer 1

Nie można zmienić typ wejścia dynamicznie, ponieważ uniemożliwia to IE i angularjs musi być kompatybilne z różnymi przeglądarkami. Więc nawet jeśli zobaczysz zmieniony typ wyświetlany w kodzie źródłowym, AngularJS go nie wykryje - typ jest oceniany tylko raz i nie można go zmienić.

Należy pamiętać, że samo ograniczenie dotyczy jQuery: jQuery change input type

Wy tylko opcje dla dynamicznych typów są albo dyrektywa niestandardowych (gdzie można pobrać dynamiczny szablon lub przygotować DOM on-the-fly) lub przy użyciu ng-include do uwzględnienia obejmują części, w których typem wejściowym jest wartość statyczna.

Answer 2

Nie można zmienić typu wejścia dynamicznie w żadnej przeglądarce, więc niemożliwe jest użycie dynamicznego pojedynczego wejścia. Pozostaje ci użycie instrukcji warunkowej do tworzenia elementów, gdzie type jest zakodowany na stałe.

Użyj dyrektywy , w której można porównać type i utworzyć elementy w oparciu o dopasowanie warunku. Na przykład:

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

W tym przykładzie są instruowania kątową skrypt porównać elem.eleType użyciu ng-switch on w drugim div przed faktycznym tj typ, tekst, hasło i email w tagu wejściowego (w porównaniu z użyciem ng-switch-when, i tylko ten element wejściowy jest stworzenie gdzie stan zapałki, reszta zostanie zignorowany

Answer 3

tak można ... przynajmniej teraz :)

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

źródło: http://codepen.io/gymbry/pen/fJchw/

UPDATE 17/04/2015:

Mam losowo zmieniona wersja kątowa w wyżej Codepen i to wydaje się działać z wersją 1.0. 2 ... Mam nadzieję, że ta pomoc ...

Answer 4

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

To działa dla mnie.

Answer 5

Oto niewielkie rozszerzenie odpowiedzi @ vidriduch. W tym przypadku używam modelu obiektowego „config” formularza {type:"password", value:"topsecret"} i wyświetlania go tak:

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

Idealnie mogę zmienić obiekt config według potrzeb i korzystać z tego samego elementu wejściowego edytować dowolny config rekord z pasującym typem/wartością.Mój oryginalny sposób przełączania rekordy było nazwać poniżej funkcja zakres:

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

Jednak czasami mam błędy konwersji lub skarg dotyczących walidacji. To jest w Chrome 47. Naprawdę nie lubię przełączać się z tekstu na daty, na przykład. Wygląda na to, że przeglądarka zmieniła wartość przed zmianą typu lub vv.

Rozwiązałem to, zmuszając model (a więc typ) do resetowania pomiędzy zmianami.

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

};

To może nie być idealne rozwiązanie, ale ilustruje to "gotcha", którego mogą doświadczać inni.

Answer 6

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

pracował dla mnie ..