I'm developing an application which adds/edits/removes contacts. Here is how my adding contact view template looks like:
<input placeholder="name" ng-model="contact.name" type="text">
<input placeholder="number" ng-model="contact.number" type="text">
<a href="#/"><button>Add</button></a>
And here is my controllers file, the controller used for adding is the last one:
var myApp = angular.module('myApp', ['ngRoute']).config(function ($routeProvider) {
$routeProvider.when('/contact/:index', {
templateUrl: 'partials/edit.html',
controller: 'Edit'
}).when('/', {
templateUrl: 'partials/contacts.html'
}).when('/add', {
templateUrl: 'partials/add.html',
controller: 'Add'
})
.otherwise({ redirectTo: '/' });
}).controller('Contacts', ['$scope',function($scope){
$scope.contacts = [
{name:'Hazem', number:'01091703638'},
{name:'Taha', number:'01095036355'},
{name:'Adora', number:'01009852281'},
{name:'Esmail', number:'0109846328'}
];
}]).controller('Edit', ['$scope','$routeParams',function($scope,$routeParams){
$scope.contact = $scope.contacts[$routeParams.index];
$scope.index = $routeParams.index;
}]).controller('Add', ['$scope', function($scope){
$scope.contacts.push({name: contact.name, number: contact.number});
}]);
I've got an error in the chrome inspector says: ReferenceError: contactname is not defined
To create a module in AngularJS, we use angular. module("app", []); syntax. 14) Which of the following is used to share data between controller and view in AngularJS? Answer: B: "using services" is the correct answer.
Approach: To share data between the controllers in AngularJS we have two main cases: Share data between parent and child: Here, the sharing of data can be done simply by using controller inheritance as the scope of a child controller inherits from the scope of the parent controller.
All applications have a $rootScope which is the scope created on the HTML element that contains the ng-app directive. The rootScope is available in the entire application. If a variable has the same name in both the current scope and in the rootScope, the application uses the one in the current scope.
Please see below
use <button ng-click="Add()">Add</button>
instaed of <a>
tag
var myApp = angular.module('myApp', [])
.controller('Add', ['$scope', function($scope){
$scope.contacts = [];
$scope.Add = function() {
$scope.contacts.push({name: $scope.contactname, number: $scope.contactnumber});
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="Add">
<input placeholder="name" ng-model="contactname" type="text">
<input placeholder="number" ng-model="contactnumber" type="text">
<button ng-click="Add()">Add</button>
<ul>
<li ng-repeat="con in contacts">{{con.name}} {{con.number}}</li>
</ul>
</div>
</div>
.controller('Add', ['$scope', function($scope){
$scope.contacts.push({name: contactname, number: contactnumber});
}]);
.controller('Add', ['$scope', function($scope){
$scope.contacts.push({name: $scope.contactname, number: $scope.contactnumber});
}]);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With