0

My question is very similar to this one : AngularJS - Value attribute on an input text box is ignored when there is a ng-model used?

Considering that answer : https://stackoverflow.com/a/20522955/1598891

I would like to know if there's a way to do the same treatment for a <select> ?

If you set a ng-model to an <input type="text">, the value of the input is reset to null (because of Angular)

There's a similar behavior for drop down lists. If you set a "selected option" in a <select>, it will be ignored if you also had the ng-model attribute.

I'm new to angular, but I found this really annoying.

Since I'm working with ASP MVC, MVC already defines all the values if I do : 

@Html.DropDownListFor(model => model.MyModel, 
    new SelectList(/*...*/), 
    "Select an options", 
    new { @class = "form-control", 
          ng_model = "MyModelProperty"})

I know that I could do something like :

ng_model = @String.Format("myModel = {0}", Model.MyModelProperty)

but it would be kind of annoying to repeat that information since MVC should already do it properly.

Community
  • 1
  • 1
RPDeshaies
  • 1,826
  • 1
  • 24
  • 29

2 Answers2

0

Yes, the behavior is the same as the input, this is how "two-way data binding" works.

Anyway, you can force the selection using ng-selected, for example:

In the your controller:

$scope.selected = null;

And in the html:

<select ng-model="model.selected">
  <option value="a">a</option>
  <option value="b" ng-selected="true">b</option>
  <option value="c">c</option>
</select>

But ATTENTION, this will only force the selection on the html, the value of the model don't is updated

Check this on plunk: http://plnkr.co/edit/uV3md09CYX0mUVfIy4b2

To know more how the data binding works see this: ng-selected not working in select element

Community
  • 1
  • 1
T4deu
  • 1,135
  • 1
  • 14
  • 19
  • So what you are saying is that there is no way of sayin to Angular **Please stop changing the selected value of my drop down list when I create a model** without using the `ng-selected` attribute ? Because it would also feel like a job done twice. I would prefer not to edit anything (except maybe a function in my JS like the linked SO post) because MVC is already setting the selected values in my drop down lists... – RPDeshaies Dec 01 '14 at 02:29
0

I ended up using this Angular.JS directive :

https://github.com/glaucocustodio/angular-initial-value

You can find more informatino in that blog :

http://blog.glaucocustodio.com/2014/10/20/init-ng-model-from-form-fields-attributes/

Just in case the links dies you need to put this code before the declaration of your Angular application: 

var initialValueModule = angular.module('initialValue', [])
.directive('initialValue', function() {
  return{
    restrict: 'A',
    controller: ['$scope', '$element', '$attrs', '$parse', function($scope, $element, $attrs, $parse){

      var getter, setter, val, tag;
      tag = $element[0].tagName.toLowerCase();

      val = $attrs.initialValue || $element.val();
      if(tag === 'input'){
        if($element.attr('type') === 'checkbox'){
          val = $element[0].checked ? true : undefined;
        } else if($element.attr('type') === 'radio'){
          val = ($element[0].checked || $element.attr('selected') !== undefined) ? $element.val() : undefined;
        } 
      }

      if($attrs.ngModel){
        getter = $parse($attrs.ngModel);
        setter = getter.assign;
        setter($scope, val);
      }
    }]
  };
});

/* commonjs package manager support (eg componentjs) */
if (typeof module !== "undefined" && typeof exports !== "undefined" && module.exports === exports){
  module.exports = initialValueModule;
}

Then you can do : 

<script>
var app = angular.module('myApp', ['initialValue']); //Pass the directive to the app
</script>

<body ng-app="myApp">
  <!-- Add the "initial-value" directive to the html input -->
  <input type="text" value="John" name="text" initial-value ng-model="text" id="text"/>
</body>
RPDeshaies
  • 1,826
  • 1
  • 24
  • 29