Geek Answers Handbook

NgModel not updating in select

I have a rendering input based on the configuration sent by the server. Everything works fine, except for the input "select". No matter what I try, the ng model is not updated. I very much trimmed my code to isolate the problem:

Javascript:

var myApp = angular.module('example', []); myApp.factory('DynamicData', [function() { return { data: { backup_frequency: 604800 } }; }]) .directive('dynamicInput', ['$compile', 'DynamicData', function($compile, DynamicData) { /** * Render the input */ var render = function render() { var input = angular.element('<select class="form-control" ng-model="inner.backup_frequency" ng-options="option.value as option.title for option in options"></select>'); return input; }; var getInput = function () { var input = render(); return input ? input[0].outerHTML : ''; }; var getTemplate = function(){ var template = '<div class="form-group">' + 'Select input ' + '<div class="col-md-7">' + getInput() + '</div>' + '</div>'; return template; }; return { restrict : 'E', scope: { content:'=content', }, link : function(scope, element, attrs) { var template = getTemplate(); scope.options = [ {title: "Daily", value: 86400}, {title: "Weekly", value: 604800}, {title: "Monthly", value: 2678400}, ]; scope.inner = DynamicData.data; console.info('inner data', scope.inner); element.html(template); element.replaceWith($compile(element.contents())(scope)); } }; }]) .controller('FormCtrl', ['DynamicData', '$scope', function (DynamicData, $scope){ $scope.app = {}; $scope.save = function save() { $scope.value = DynamicData.data.backup_frequency; console.info('DynamicData', DynamicData.data); }; }]);

HTML:

  <head> <script data-require="angular.js@1.3.8" data-semver="1.3.8" src="https://code.angularjs.org/1.3.8/angular.js"></script> <link href="style.css" rel="stylesheet" /> <script src="script.js"></script> </head> <body> <h1>Dynamic Input :</h1> <div data-ng-controller="FormCtrl"> <dynamic-input class="form-group" content="app"></dynamic-input> <span data-ng-bind="value"></span><br/> <button class="btn btn-primary" ng-click="save()">Save</button> </div> </body> </html>

A working plunger is available: http://plnkr.co/edit/mNBTJzZXjX6mLyPz6NCI?p=preview

Do you have any idea why the ng model in select is not updated?

EDIT: What I want to achieve is to update the variable "inner.backup_frequency" (a reference to my data object returned by my factory DynamicData). As you can see in the plunker, whenever I change a parameter in select, the variable contained in the ng model is not updated.

Thank you for your time.

+8
javascript angularjs
source share
2 answers

I fixed it. You did not need to replace the contents of the element with compiled content, but rather replace it with raw HTML and then compile it.

 element.html(template); $compile(element.contents())(scope);

Worker Plunker .

EDIT : I edited your code to work without the directive:

Plunker without directive .

EDIT 2 : also the version in which it works with the directive, but without compilation:

Plunker .

+3
source share

I had a similar problem, and if you directly bind ng-model to a scope variable, as shown below, the selection of the scope variable will somehow not be updated.

 <select ng-model="selection" ng-options="option for option in options">

Instead, define a view model in your area and attach the ng model to the field of view model. The view model field will be updated.

 <select ng-model="viewmodel.selection" ng-options="option for option in options">

In your controller, you should do the following:

 app.controller('SomeCtrl', ['$scope' function($scope) { $scope.viewmodel = {}; });
+13
source share

More articles:


All Articles