Setting Angularjs ng-model value through Javascript

StackOverflow https://stackoverflow.com/questions/23553522

  •  18-07-2023
  •  | 
  •  

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!

Was it helpful?

Solution

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top