CODEWITHSUNDEEP
javascripthtmlangularjs
jsbuechler
jsbuechler

Reputation: 37

Setting data-ng-model in JavaScript

I need to set the data-ng-model attribute of an html input field via javascript. I know I can't do

element.data-ng-model = "...";

because of the dashes. So I tried

element.["data-ng-model"] = "...";

and

element.dataNgModel = "...";

and

element.datangmodel = "...";

None of these seem to work properly. Any suggestions?

Upvotes: 0

Views: 921

Answers (2)

ak85
ak85

Reputation: 4264

If you need to set the model with javascript you can set it in the controller see below From the angular docs https://docs.angularjs.org/api/ng/directive/ngModel

(function(angular) {
  'use strict';
  angular.module('getterSetterExample', [])
    .controller('ExampleController', ['$scope',
      function($scope) {
        var _name = 'Brian';
        $scope.user = {
          name: function(newName) {
            // Note that newName can be undefined for two reasons:
            // 1. Because it is called as a getter and thus called with no arguments
            // 2. Because the property should actually be set to undefined. This happens e.g. if the
            //    input is invalid
            return arguments.length ? (_name = newName) : _name;
          }
        };
      }
    ]);
})(window.angular);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>

<div ng-app="getterSetterExample">
  <div ng-controller="ExampleController">
    <form name="userForm">
      <label>Name:
        <input type="text" name="userName" ng-model="user.name" ng-model-options="{ getterSetter: true }" />
      </label>
    </form>
    <pre>user.name = <span ng-bind="user.name()"></span></pre>
  </div>
</div>

Upvotes: 0

Matt Wilson
Matt Wilson

Reputation: 8319

Try:

element.setAttribute("ng-model", "...");

or if you have JQuery:

$(element).attr("ng-model", "...");

Upvotes: 2

Related Questions