angularjs – ng-switch does not bind ng-model

by

This is a scope inheritance problem due to ng-switch creating its own scope.

One recommendation made often is always to use a dot on models. The reason is that when the controller scope item is an object and not a primitive, sub scopes will create a reference to the initial object. If model is a primitive it will not update the original.

For example:

<input ng-model="test.value" placeholder="pre" type="text" />

$scope.test={value:''}

Another approach is to use $parent in html model markup:

<input ng-model="$parent.test" placeholder="pre" type="text" />

Using the dot methodology is a good practice to avoid these issues as you don’t need to think about deeper nested scopes.

Demo using test.value as model: http://plnkr.co/edit/CkiF55bLXsYzR6ZjcrJp?p=preview

Reference regarding dot in models(valuable reading): https://github.com/angular/angular.js/wiki/Understanding-Scopes

More Related Contents:

  1. How to cancel an $http request in AngularJS?
  2. htaccess redirect for Angular routes
  3. AngularJS. How to call controller function from outside of controller component
  4. When writing a directive in AngularJS, how do I decide if I need no new scope, a new child scope, or a new isolated scope?
  5. Dynamic validation and name in a form with AngularJS
  6. How to use $http promise response outside success handler
  7. Can I use ng-model with isolated scope?
  8. AngularJS : Where to use promises?
  9. AngularJS. When select have ng-model attribute, ng-selected not working
  10. How to use ng-repeat for dictionaries in AngularJs?
  11. Confused about Angularjs transcluded and isolate scopes & bindings
  12. Using success/error/finally/catch with Promises in AngularJS
  13. ng-repeat not updating on update of array
  14. get original element from ng-click
  15. Scope issue in AngularJS using AngularUI Bootstrap Modal
  16. angularjs share data config between controllers
  17. Can I use one ng-app inside another one in AngularJS
  18. Using ng-app without a value
  19. Angular $http vs service vs ngResource
  20. AngularJS watch array of objects for data change
  21. When to use the AngularJS `$onInit` Life-Cycle Hook
  22. Refreshing page gives “Page not found”
  23. Compare objects in Angular
  24. Rendering Highcharts using Angular js Directives
  25. Angularjs: a Service that serves multiple $resource urls / data sources?
  26. What is ng-transclude?
  27. How to share data between two modules in AngularJS?
  28. AngularJS ng-model-options getter-setter
  29. When to use double braces {{}} in angularJS
  30. Angular reload current route and reload the current template

Leave a Comment