New to Angular: Getting Started with NgModel Binding

Question

New to Angular: Getting Started with NgModel Binding

Novice query:

I am facing an issue with a simple input type=text element linked to ng-model="xyz.zyx", where xyz refers to an object. In my controller, I initialize this object and set the value for the property zyx as shown below:

xyz {
  zyx: $scope.zzz
}

The strange part is that there are no input fields on the page using ng-model="zzz", but somehow, the value of zyx is being assigned to the value of the input field defined initially with ng-model="xyz.zyx". Why is this happening? What is the source of $scope.zzz?

javascript angularjs

Answer 1

Answer №1

Your question sparked my interest, so I decided to leave a comment and create a plunker for you to experiment with.

http://plnkr.co/edit/xyz123

javascript

var app = angular.module('app', []);

app.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope'];

function MainCtrl ($scope) {
  $scope.testing = "Example";

  $scope.data = {
    info: $scope.testing
  }
}

html

<html ng-app="app">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Playground</title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angularjs_1_3_15@*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <input type="text" ng-model="data.info">
    <pre>testing: {{testing | json}}</pre>
    <pre>data: {{data | json}}</pre>
  </body>

</html>

Answer 2

Your question sparked my interest, so I decided to leave a comment and create a plunker for you to experiment with.

http://plnkr.co/edit/xyz123

javascript

var app = angular.module('app', []);

app.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope'];

function MainCtrl ($scope) {
  $scope.testing = "Example";

  $scope.data = {
    info: $scope.testing
  }
}

html

<html ng-app="app">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Playground</title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angularjs_1_3_15@*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <input type="text" ng-model="data.info">
    <pre>testing: {{testing | json}}</pre>
    <pre>data: {{data | json}}</pre>
  </body>

</html>

New to Angular: Getting Started with NgModel Binding

Answer №1

Similar questions

Tips for resolving dependency conflicts in a JavaScript project starter template

Can a dynamic field name be incorporated into a JavaScript Object?

Angular 6 is experiencing an issue with the functionality of the file toggle JS

Why do two date type variables have identical content?

JavaScript that Implements MVC Architecture Using C#

Building a Wordpress website with AJAX functionality using only raw Javascript and no reliance on Jquery

Error: The JavaScript variable 'undefined' is being used as a function, which is incorrect. This error occurs when trying to execute the function `mockBackend

Generating a New Form in AngularJs Dynamically from a Separate Input

NgbHighlight now allows for one highlight element per line

Using jQuery to highlight the navigation menu when a specific div scrolls into view

Kendo UI Web - MultiSelect: choosing an option multiple times

Ways to capture targeted requests

Creating a flowchart of a finite state machine within a browser-based software platform

Stop users from refreshing or closing the window while an axios request is being processed

Discovering the method to retrieve the information of the selected item in AngularJS

Unlocking the potential: Extracting data from a PHP function using AngularJS

JavaScript Date Validation: Ensuring Proper Dates

Upgrading the entire document's content using jQuery

What is the best way to eliminate the background color from one span after selecting a different one?

Explore the ng-transclude tag's scope within the markup