Когда у меня есть выражение Angular в качестве значения input
type
, оно не будет работать:
<input ng-model="model" type="{{'number'}}">
Числовые значения преобразуются в строки, а флажки не работают вообще.
Когда у меня есть выражение Angular в качестве значения input
type
, оно не будет работать:
<input ng-model="model" type="{{'number'}}">
Числовые значения преобразуются в строки, а флажки не работают вообще.
Вы не можете изменять тип ввода динамически, поскольку IE запрещает это, и AngularJS должен быть совместим с несколькими браузерами. Таким образом, даже если вы можете увидеть измененный тип, отображаемый в исходном коде, AngularJS не подберет его - тип оценивается только один раз и не может быть изменен.
Обратите внимание, что те же ограничения применяются к jQuery: тип ввода изменения jQuery
Только параметры для динамических типов - это либо настраиваемая директива (где вы можете загружать динамический шаблон или готовить DOM на лету), либо использовать ng-include
для включения include partials, где тип ввода является статическим значением.
да, вы можете... по крайней мере сейчас:)
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/
ОБНОВЛЕНИЕ 17/04/2015:
Я случайно изменил версию Angular выше Codepen, и это, похоже, работает с версией 1.0.2... Надеюсь, что эта помощь...
Динамический тип ввода нельзя изменять динамически в любом браузере, и поэтому невозможно использовать динамический однопозиционный оператор. Вы остаетесь с использованием условного оператора для создания элементов, где 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 script сравнить elem.eleType
с помощью ng-switch on
во втором div с фактическим типом, т.е. текстом, паролем и электронной почтой во входном теге (сравнивается с помощью 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.
Я решил это, заставив модель (и, следовательно, тип) до reset между изменениями.
$scope.newRecord = function (newcfg) {
$scope.config = {}; //clear the model object
$timeout(function() {
$scope.config = newcfg;
}, 0); //zero delay needed
};
Это может быть не идеальное решение, но оно иллюстрирует "готовность", которую могут испытывать другие.
<input type="{{showPassword?'text':'password'}}" class="form-control" name="password" placeholder="Enter password" ng-model="register.regData.password">
работал у меня..