2013-11-26 4 views
1

Как настроить тип ввода на основе другой переменной? (Моя первоначальная мысль заключалась в том, чтобы иметь) триггер директивы из события onclick, который должен установить тип ввода. Я думал об использовании директивы, но не уверен, чтоКак установить тип ввода на основе переменной в angularjs?

ПЕРВЫЙ

//loop 
<a class="orgTitle" id="@c.Id" data-ng-click="selectQuestion(@c.Id, @c.SelectionTypeId);" style="cursor:pointer">@c.ProgramName</a> 

ТОГДА

$scope.selectQuestion = function(id, selectionTypeId) {//call returns data and push to QuestionList} 

НАКОНЕЦ

<div data-ng-repeat="question in angularPage.QuestionList"> 
<span>{{question.Question}}</span><br/> 
<span>//directive to get my answer type, whether radiobutton or textbox</span> 
+0

Вы не можете установить/изменить тип ввода динамически. Вам нужно использовать ng-switch или аналогичную директиву для визуализации различного поля ввода в зависимости от динамического значения. – Stewie

+0

@Stewie Почему бы и нет? –

+1

IE не позволяет этого, поэтому Angular уступает этому, чтобы оставаться совместимым с кросс-браузером. – Stewie

ответ

2

Попробуйте написать директиву так: Pseudo-Code, не проверено!

angular.module('inputType', []) 
    .directive('inputType', function (/**injects here*/) { 
    return { 
     restrict: 'A', 
     scope: false, 
     link: function (scope, element, attr) { 
     var inputType = scope.$eval(attr.inputType); 
     element.attr('type', inputType); 
     } 
    }) 
}); 

Тогда в HTML:

<input input-type="myDynamicInputType" /> 
0

Я ... Я имею в виду, мы полагали, что это! Поскольку jquery ограничивает изменение свойства типа, я добавил добавление в тип ввода html.

HTML

<input-type question-type="question.myDynamicInputType" /> 

JS

.directive('inputType', function() { 
    return { 
     restrict: 'E', 
     link: function (scope, element, attr) { 
      $(element).append('<input type="' + scope.$eval(attr.inputType) + '" />'); 
     } 
    } 
}); 

элемент

<input-type question-type="question.myDynamicInputType"> 
    <input type="number"> 
</input-type> 

Спасибо за вашу помощь, ребята!

+0

Если какой-то ответ вам помог, отметьте его как ответ. Люди ищут зеленую галочку;) – angabriel

Смежные вопросы