Angular JS - template of a directive ng -model does not work within ng -switch

Question

To become more dynamic my directive decided to include the category field that makes the selection of the type of template to be displayed. As it is only a select thought of using the switch - ng instead of several html files. (google translate)

Plunker: http://plnkr.co/edit/fnCJj15XJN1kQvKq1OtZ?p=preview

index.html

<div ng-controller="MainCtrl">
<sg-combo 
  selected-item="selectedItem" categoria="filtro">
</sg-combo>

{{selectedItem}}

script.js

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  $scope.selectedItem = {value: null};
  $scope.$watch('selectedItem',function(item){
  if (item != null){
    alert(item.nome); // does not display when updating
  }
 })
});

app.directive('sgCombo', function(){
function link(scope, elem, attrs){    
        scope.dados = [
            {'codigo':1, 'nome':'teste1'},
            {'codigo':2, 'nome':'teste2'},
            {'codigo':3, 'nome':'teste3'}
        ];
}

return {
        restrict: 'E',          
    scope: {            
        selectedItem: '=',            
        categoria: '@'            
    },
    link: link,
    templateUrl:"sg-combo.html"
 }
})

sg-combo.html

<div ng-switch="categoria">
 <div ng-switch-when="filtro" class="col-sm-4 control-label">
   <div class="col-sm-4 control-label">
     <label>{{label}}</label>
     <select ng-model="selectedItem.value" ng-options="item.nome for item in dados" class="form-control"></select>
   </div>
 </div>
 <div ng-switch-when="anexo" class="col-sm-4 control-label">
  <div class="col-sm-4 control-label">
    <label>{{label}}</label>
    <select ng-model="selectedItem.value" ng-options="item.nome for item in dados" class="form-control"></select>
  </div>
 </div>
</div>

replied in stackoverflow portugueses pt.stackoverflow.com/questions/105410/… — Alessandro Barros
– Alessandro Barros, Commented Jan 2, 2016 at 13:13

Frane Poljak · Accepted Answer · 2015-12-30 16:57:29Z

0

Try to make 'selectedItem' a part of an object. For instance:

In controller: $scope.options = {'selectedItem': someItem};

In template: ng-model="options.selectedItem"

answered Dec 30, 2015 at 16:57

Frane Poljak

2,36323 silver badges25 bronze badges

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

1 Comment

Frane Poljak Over a year ago

I see you edited the code, doing excatly what I suggested here. Did it work? If so, an upvote would be nice :)

Community · Accepted Answer · 2017-05-23 12:02:24Z

0

ng-switch adds a scope and you should use '.' in ng-model.

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Dec 30, 2015 at 17:17

Artem

8338 silver badges15 bronze badges

1 Comment

Artem Over a year ago

It is bad idea to change original code in question, so my answer may confuse somebody. Please check original version

Collectives™ on Stack Overflow

Angular JS - template of a directive ng -model does not work within ng -switch

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related