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

Navigating in a Curved Path using Webkit Transition

Toggle between a list view and grid view for viewing photos in a gallery with a

The Quivering Quandaries of Implementing Jquery Accordions

Creating custom elements for the header bar in Ionic can easily be accomplished by adding your own unique design elements to the header bar or

Tips for testing the onEnter and resolve functions of a ui-router state

Unveil the modules of a Node.js NPM application

Enhancing a popup with animated effects

Incorporating PruneCluster into an AngularJS Leaflet Directive for Enhanced Mapping

What is the correct way to show a JavaScript response on the screen?

Downloading Several Files Simultaneously in Chrome

JavaScript: void(0), Internet Explorer 6, and SWFAddress are all important components

Puppeteer App Error: An error has been detected on the client side

ReactJS Chatkit has not been initialized

Utilize Jade to showcase information within an input field

How can you display or conceal an HTML page in Jquery Mobile?

Emphasize specific letters in a word by making them bold, according to the user

Utilizing jQuery for AJAX-Based Deletion of Records

Leveraging JavaScript to create a horizontal divider

The issue with mocking collections using JSON files in Backbone is that it is not properly triggering the success callbacks in

"Uncaught ReferenceError: $ is not defined - $function()" error in JavaScript/jQuery