Setting Angularjs ng-model value through Javascript

Question

I have reviewed many answer/questions on this site, and none seem to address my problem. If I am wrong, I apologize.

Here is the link to my example, so you can see my code and its behavior: Sample Code

Consider two objects:

items = {
    a: "apple",
    b: "banana"
};

lines = [
    {key: "a"},
    {key: "b"},
    {key: "b"},
    {key: "a"}
];

I display them as follows:

<div ng-repeat="line in lines">
   <div ng-click="clicked(items[line.key])">
      {{items[line.key]}}
  </div>
</div>

Note that "lines" contains repeating values, and items is a set (of unique items).

In the application I am creating, when a user clicks on one of the lines, I need to provide an input field that will update the item pointed to by the line key. And, I need two-way binding so that changes via the input are automatically reflected throughout the lines.

In my sample (see link above), I have added two input tags:

Input 1: <input ng-model="items.a">
Input 2: <input ng-model="mymodel">

Input #1 sets ng-model using an explicit reference to items. Input #2 sets the value of ng-model using a variable existing within $scope.

<div ng-click="clicked(items[line.key])">

The value of mymodel is changed when the user clicks on a div (line) output via the ng-repeat.

Input 1 works as expected. Changes made via the input are automatically reflected throughout the generated divs.

Input 2 represents what I am trying to accomplish: dynamic binding of the ng-model in the input element to the same model in the div line the user clicked on. In my supplied example, the correct text is displayed in the input, but there is no two-way binding between it and the div lines that have the same key.

Here is my complete script:

   var myApp = angular.module("myApp",[]);

myApp.controller("mainCtrl", function ($scope) {
    $scope.items = {
        a: "apple",
        b: "banana"
    };
    $scope.lines = [
        {key: "a"},
        {key: "b"},
        {key: "b"},
        {key: "a"}
    ];
    $scope.mymodel = $scope.items.a;

    $scope.clicked = function(key) {
      $scope.mymodel = key;
    };
});

And here is my index.html:

<!DOCTYPE html>
<html>
  <body ng-app="myApp" ng-controller="mainCtrl">
    Input 1: <input ng-model="items.a">
    Input 2: <input ng-model="mymodel">
    <div ng-repeat="line in lines">
      <div ng-click="clicked(items[line.key])">{{items[line.key]}}</div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <script src="script.js"></script>
</body>

Thank you in advance for assistance!

Respect the dot rule and use an object rather than a primitive in $scope.mymodel. — Blackhole
– Blackhole, Commented May 8, 2014 at 22:24
Are you aware that ng-repeat creates a new isolate scope for each iteration? — mortsahl
– mortsahl, Commented May 8, 2014 at 22:24
I am aware of that, but I am looking for a solution to my use case. What solution would you propose? — user1519054
– user1519054, Commented May 8, 2014 at 22:28
Blackhole and mortshal, your comments we also helpful. Thanks! — user1519054
– user1519054, Commented May 8, 2014 at 23:04

Zack Argyle · Accepted Answer · 2014-05-08 22:45:58Z

2

Here is how I would do it. Just have your mymodel variable be a 'key' value, and link it to the input through that key. Plunker

$scope.clicked = function(key) {
  $scope.mymodel = key;
};

And switch up your html to this.

Input 1: <input ng-model="items.a">
Input 2: <input ng-model="items[mymodel]">
<div ng-repeat="line in lines">
  <div ng-click="clicked(line.key)">{{items[line.key]}}</div>
</div>

answered May 8, 2014 at 22:45

Zack Argyle

8,4674 gold badges31 silver badges38 bronze badges

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

2 Comments

user1519054 Over a year ago

Yes...that is what I was trying to accomplish. Thanks!

Zack Argyle Over a year ago

@user1519054, Right on man. Good luck! Accept the answer if you're satisfied.

Collectives™ on Stack Overflow

Setting Angularjs ng-model value through Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related