In AngularJS, you can create and manipulate objects just like you would in plain JavaScript. Here’s an example of creating an object in an AngularJS controller:
- Create an AngularJS module and controller:
JS Code
angular.module('app', [])
.controller('MainController', function($scope) {
$scope.person = {
name: 'John Doe',
age: 30,
profession: 'Software Developer'
};
$scope.updatePerson = function(name, age, profession) {
$scope.person.name = name;
$scope.person.age = age;
$scope.person.profession = profession;
};
});
In this example, we create an object called person with the properties name, age, and profession. We also define a function called updatePerson that updates the person object with new values.
- Create an HTML file with input fields bound to the object properties:
HTML Code
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainController">
<input type="text" ng-model="person.name">
<input type="number" ng-model="person.age">
<input type="text" ng-model="person.profession">
<button ng-click="updatePerson('Jane Doe', 28, 'Product Manager')">Update Person</button>
<p>Name: {{person.name}}</p>
<p>Age: {{person.age}}</p>
<p>Profession: {{person.profession}}</p>
</body>
</html>
In the HTML file, we create input fields bound to the person object’s properties using the ng-model directive. We also display the person’s properties using AngularJS expressions, and create a button that calls the updatePerson function when clicked.
When you run this example, you’ll see input fields populated with the person object’s properties, and you can update these properties using the input fields or by clicking the “Update Person” button.
Here is the complete example of creating an object in AngularJS:
index.html – Main HTML file:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainController">
<input type="text" ng-model="person.name">
<input type="number" ng-model="person.age">
<input type="text" ng-model="person.profession">
<button ng-click="updatePerson('Jane Doe', 28, 'Product Manager')">Update Person</button>
<p>Name: {{person.name}}</p>
<p>Age: {{person.age}}</p>
<p>Profession: {{person.profession}}</p>
</body>
</html>
app.js – Main JavaScript file:
angular.module('app', [])
.controller('MainController', function($scope) {
$scope.person = {
name: 'John Doe',
age: 30,
profession: 'Software Developer'
};
$scope.updatePerson = function(name, age, profession) {
$scope.person.name = name;
$scope.person.age = age;
$scope.person.profession = profession;
};
});
In this example, we create an object called person with the properties name, age, and profession in the MainController. We also define a function called updatePerson that updates the person object with new values.
The HTML file contains input fields bound to the person object’s properties using the ng-model directive. We also display the person’s properties using AngularJS expressions and create a button that calls the updatePerson function when clicked.
When you run this example, you’ll see input fields populated with the person object’s properties. You can update these properties using the input fields or by clicking the “Update Person” button. The updated object’s properties will be displayed on the page.
