Dynamically setting `input` type in angularjs - not works

Question

I am tying to set the input field dynamically. But I came up with error. how to use the ng-switch-when to set the type in input fields or any other alternate?

here is my temp:

var GridTemplate = [
            '<div>',
                '<div>',
                    '<ul class="titles"><li  ng-repeat="page in currentPage">{{page.title}}</li></ul>',
                    '<div class="rowContent">',
                    '<ul ng-repeat="(title,page) in currentPage">',
                        '<li  ng-repeat="(key,element) in page.key track by $index">',
                        '<input ng-switch-when="page.key[key] == string" type="text" name="" id="" ng-model="page.key[key]" ng-blur="numSort( page )" />',
                        '<input ng-switch-when="page.key[key] == number" name="" id="" ng-model="page.key[key]" ng-blur="numSort( page )" />',
                        '</li></ul></div>',
                    '<div class="pageNavigator"><ul><li  ng-repeat="page in slides"><a ng-href="">{{$index+1}}</a></li></ul></div>',
                '</div>',
            '</div>'
            ];

error is : Controller 'ngSwitch', required by directive 'ngSwitchWhen', can't be found! — 3gwebtrain
– 3gwebtrain, Commented May 19, 2017 at 14:08

Amadou Beye · Accepted Answer · 2017-05-19 14:20:47Z

1

Try this:

<input type="{{getInputType(page.key[key])}}" ng-model="page.key[key]" />

and then a function in your controller to check the param and return the input type

 $scope.getInputType = function(param){
     if(angular.isString(param)) return "text";
     if(angular.isNumber(param)) return "number";
 }

edited May 19, 2017 at 14:20

answered May 19, 2017 at 14:14

Amadou Beye

2,8583 gold badges21 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ivanibash · Accepted Answer · 2017-05-19 14:19:49Z

0

ng-switch-when directives need to be wrapped in a ng-switch directive.

From here:

<ANY ng-switch="expression">
  <ANY ng-switch-when="matchValue1">...</ANY>
  <ANY ng-switch-when="matchValue2">...</ANY>
  <ANY ng-switch-default>...</ANY>
</ANY>

So in your case I think it would be smth like

<li ng-switch="page.key[key]" ng-repeat="(key,element) in page.key track by $index">
  <input ng-switch-when="string" type="text" name="" id="" ng-model="page.key[key]" ng-blur="numSort( page )" />
  <input ng-switch-when="number" name="" id="" ng-model="page.key[key]" ng-blur="numSort( page )" />
</li>

edited May 19, 2017 at 14:19

answered May 19, 2017 at 14:13

ivanibash

1,5012 gold badges15 silver badges38 bronze badges

Collectives™ on Stack Overflow

Dynamically setting `input` type in angularjs - not works

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related