I have a ng-repeat on a div which shows value from an array in the controller. The div is commented when I do the inspect element in the browser. I have an outer div with the ng-controller on it.
This is the html file:
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title></title>
<script type="text/javascript" src="../js/angular.js"></script>
<script type="text/javascript" src="../js/angular-route.js"></script>
<script type="text/javascript" src="../js/controller.js"></script>
<!-- <base href="localhost:5000/"/> -->
<base href="/"/>
</head>
<body>
<div ng-controller="firstController">
First name:<input type="text" ng-model="firstName"><br>
Last name:<input type="" ng-model="lastName"><br>
<input type="button" ng-click="loadView()" value="submit" name="">
<p>{{firstName}}</p>
<div ng-repeat="data in array">
{{data.name}}
</div>
</div>
</body>
</html>
This is the controller:
var app = angular.module('myapp',['ngRoute']);
// var app = angular.module('myapp',[]);
app.config(function($routeProvider,$locationProvider){
$routeProvider.when('/index',{
templateUrl:'./view/index.html',
controller:'firstController'
})
.when('/second/:firstName/:lastName',{
templateUrl:'./view/second.html',
controller:'secondController'
})
.otherwise({redirectTo:'/index'})
$locationProvider.html5Mode(true);
})
app.controller('firstController',function($scope,$location){
$scope.firstName = "";
$scope.lastName="";
$scope.loadView = function(){
$location.path('/second/'+$scope.firstName+"/"+$scope.lastName);
}
var arrays = [
{name:ab}, {name:ba}, {name:ac}, {name:ca}
];
$scope.array = arrays;
})
.controller('secondController',function($scope,$routeParams){
$scope.firstName = $routeParams.firstName;
$scope.lastName = $routeParams.lastName;
})
And also, when I try to navigate to second.html on button click which calls the loadView() in the controller, I see the url in the address bar has changed but it still shows the content of the first html(index.html).
The values for the array should be in single quotes unless they are variables. So instead of {name:ab} just do {name:'ab'}
Check out the snippet
var app = angular.module('myapp', []);
// var app = angular.module('myapp',[]);
app.controller('firstController', function($scope, $location) {
$scope.firstName = "";
$scope.lastName = "";
$scope.loadView = function() {
$location.path('/second/' + $scope.firstName + "/" + $scope.lastName);
}
var arrays = [{
name: 'ab'
}, {
name: 'ba'
}, {
name: 'ac'
}, {
name: 'ca'
}];
$scope.array = arrays;
})
.controller('secondController', function($scope, $routeParams) {
$scope.firstName = $routeParams.firstName;
$scope.lastName = $routeParams.lastName;
})
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div ng-controller="firstController">
First name:
<input type="text" ng-model="firstName">
<br>Last name:
<input type="" ng-model="lastName">
<br>
<input type="button" ng-click="loadView()" value="submit" name="">
<p>{{firstName}}</p>
<div ng-repeat="data in array">
{{data.name}}
</div>
</div>
</body>
</html>
The div gets commented when the object is empty.
Make sure that your $scope.object has the data that you want.
Related
Please find my my controller javascript file below -
angular.module('myApp', []);
angular.module('myApp').factory('myFactory', function () {
var myFactory = {};
myFactory.list = [];
myFactory.add = function (message) {
myFactory.list.push({ id: myFactory.list.length, text: message });
//return myFactory;
};
return myFactory;
});
angular.module('myApp').controller('Controller1', function (myFactory) {
var myVar = this;
myVar.myList = myFactory.List;
});
angular.module('myApp').controller('Controller2', function (myFactory) {
var myVar = this;
myVar.newMessage = 'Hello World!';
myVar.addMessage = function (message) {
myFactory.add(message);
myVar.newMessage = '';
};
});
And also my HTML file below -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body ng-app="myApp">
<div>
<h1>Services</h1>
<div' ng-controller="Controller1">
<p ng-repeat="m in myList">{{ m.id }}: {{ m.text }}</p>
</div'>
</div>
<div ng-controller="Controller2 as post">
<form ng-submit="post.addMessage(post.newMessage)">
<input type="text" ng-model="post.newMessage">
<button type="submit"
ng-click="post.addMessage(post.newMessage)">
Add Message
</button>
</form>
</div>
</body>
</html>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/angular.js"></script>
I can't see the data returning by the 'Controller1'
When I run the code I can't see the result which is coming from Controller1, which means the list is not binding with the ng-controller in .html page
Please tell me where I am wrong.
You are not referencing your list properly:
<p ng-repeat="m in myList">{{ m.id }}: {{ m.text }}</p>
If you are going to use myVar to store your list, you should use Controller as syntax so that your template has a reference to the variable:
<div ng-controller="Controller1 as myVar">
<p ng-repeat="m in myVar.myList">{{ m.id }}: {{ m.text }}</p>
</div>
This is my code
index.html
<html ng-app="myApp">
<head>
<script src="https://code.angularjs.org/1.6.0-rc.2/angular.min.js"</script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="mainController">
<label>Who is your favorite player</label><br>
<input type="text" ng-model="handle"/>
<hr/>
<h1>Favorite Player - {{ lchandle }}</h1>
</div>
</body>
app.js
var myApp = angular.module("myApp" , []);
var controller = myApp.controller( 'mainController' , [ '$scope' , '$filter' , function( $scope , $filter )
{
$scope.handle = "";
var tolower = function(){
return $filter('lowercase')($scope.handle);
}
$scope.lchandle = tolower();
}]);
The favorite player does update when I change in the input
Can you please tell me what I am doing wrong?
You can achieve this by adding a $watch for the variable and variable
DEMO
var myApp = angular.module("myApp" , []);
var controller = myApp.controller( 'mainController' , [ '$scope','$filter' , function( $scope , $filter )
{
$scope.$watch('handle', function() {
$scope.handle = $filter('lowercase')($scope.handle);
});
}]);
<html ng-app="myApp">
<head>
<script src="https://code.angularjs.org/1.6.0-rc.2/angular.min.js"</script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="mainController">
<label>Who is your favorite player</label><br>
<input type="text" ng-model="handle"/>
<hr/>
<h1>Favorite Player - {{ handle }}</h1>
</div>
</body>
You need to pass a function instance, instead of its result after calling it. So change it from $scope.lchandle = tolower(); to $scope.lchandle = tolower;.
Then you can call (execute) it with <h1>Favorite Player - {{ lchandle() }}</h1>
var myApp = angular.module("myApp", []);
var controller = myApp.controller('mainController', ['$scope', '$filter', function($scope, $filter) {
$scope.handle = "";
var tolower = function() {
return $filter('lowercase')($scope.handle);
}
$scope.lchandle = tolower;
}]);
<html ng-app="myApp">
<head>
<script src="https://code.angularjs.org/1.6.0-rc.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="mainController">
<label>Who is your favorite player</label><br>
<input type="text" ng-model="handle" />
<hr/>
<h1>Favorite Player - {{ lchandle() }}</h1>
</div>
</body>
Unless you are planning to change your filter, I suggest to use a different syntax for filters:
<h1>Favorite Player - {{ handle | lowercase }}</h1>
Based on previous answer by Sajeetharan I made version with ng-change, which I think is easier to figure out and more modern.
var myApp = angular.module("myApp" , []);
var controller = myApp.controller( 'mainController' , [ '$scope','$filter' , function( $scope , $filter )
{
$scope.lowercase = function() {
$scope.lhandle = $filter('lowercase')($scope.handle);
};
}]);
<html ng-app="myApp">
<head>
<script src="https://code.angularjs.org/1.6.0-rc.2/angular.min.js"</script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="mainController">
<label>Who is your favorite player</label><br>
<input type="text" ng-model="handle" ng-change="lowercase()"/>
<hr/>
<h1>Favorite Player - {{ lhandle }}</h1>
</div>
</body>
This is my code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('myController', function ($scope) {
$scope.getName = function () {
$scope.name = fname;
$scope.lastName = lastName;
};
})
</script>
</head>
<body ng-app="myApp" >
<div >
<input type="text" ng-model="name"/> <br>
<input type="text" ng-model="lastName" />
</div>
<div ng-controller="myController">
<input type="button" value="click" ng-click="getName()" />
<br>
Hello FirstName {{name}}<br>
Last Name {{lastName}}
</div>
</body>
</html>
values are coming while typing into textbox but i want values only after clicking the button.Please help me.
I tried in both ways simple as well as by using service or factory method but no success
You must separate the ng-models of the input texts and destination field. They are updating real-time because of having the same models.
I have created the correct version for you:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('myController', function ($scope) {
$scope.getName = function () {
$scope.nameToSet = $scope.name;
$scope.lastNameToSet = $scope.lastName;
};
})
</script>
</head>
<body ng-app="myApp" >
<div >
<input type="text" ng-model="name"/> <br>
<input type="text" ng-model="lastName" />
</div>
<div ng-controller="myController">
<input type="button" value="click" ng-click="getName()" />
<br>
Hello FirstName {{nameToSet}}<br>
Last Name {{lastNameToSet}}
</div>
</body>
</html>
UPDATE: Here is another version with using a factory:
var myApp = angular.module('myApp', []);
myApp.factory('container', function() {
var model = {
name: '',
lastName: ''
};
return {
model: model,
setName: function(nameToSet) {
model.name = nameToSet;
},
setLastName: function(lastNameToSet) {
model.lastName = lastNameToSet;
}
};
});
myApp.controller('myController', function ($scope, container) {
$scope.$watch('name', function(newvalue,oldvalue) {
container.setName(newvalue);
});
$scope.$watch('lastName', function(newvalue,oldvalue) {
container.setLastName(newvalue);
});
$scope.onNameType = function(value) {
container.setName(value);
};
$scope.onLastNameType = function(value) {
container.setLastName(value);
};
$scope.getName = function () {
debugger;
$scope.nameToSet = container.model.name;
$scope.lastNameToSet = container.model.lastName;
};
})
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
</head>
<body ng-app="myApp" >
<div >
<input type="text" ng-model="name" ng-change="onNameType(name)"/> <br>
<input type="text" ng-model="lastName" ng-change="onLastNameType(lastName)" />
</div>
<div ng-controller="myController">
<input type="button" value="click" ng-click="getName()" />
<br>
Hello FirstName {{nameToSet}}<br>
Last Name {{lastNameToSet}}
</div>
</body>
</html>
I have a view where the user gives an input and display it in another view.
view 1:
<ion-content ng-controller="controller">
<input type="text" ng-model="name">
<button ng-click="save()">Save</button>
Controller:
$scope.save = function () {
$scope.displayName = $scope.name;
$state.go('app.viewTwo');
}
View 2:
<ion-content ng-controller="controller">
{{displayName}}
</ion-content>
Its known, that whenever a view is loaded the controller is initialized fresh every time. So how to display the value from the first view, in another view.
You need to use a service or factory to use the variable across the controllers.
DEMO:
var app = angular.module("clientApp", [])
app.controller("TestCtrl",
function($scope,names) {
$scope.names =[];
$scope.save= function(){
names.add($scope.name);
}
$scope.getnames = function(){
$scope.names = names.get();
}
}
);
app.factory('names', function(){
var names = {};
names.list = [];
names.add = function(message){
names.list.push({message});
};
names.get = function(){
return names.list;
};
return names;
});
<!doctype html>
<html >
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="clientApp">
<div ng-controller="TestCtrl">
<input type="text" ng-model="name">
<button ng-click="save()" > save</button>
</div>
<div ng-init="getnames()" ng-controller="TestCtrl">
<div ng-repeat="name in names">
{{name}}
</div>
</div>
</body>
</html>
You can also use $rootScope , but it is not a recommended way.
Angular Controller return error when called through an app. But works when written directly.
My html code
<!DOCTYPE html>
<html ng-app>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-app="fbapp">
<div ng-controller="fbController" class="container">
<input type="text" name="name" ng-model="name"/>
<input type="button" value="Fetch" ng-click="fetchUser()" class="btn btn-primary"/>
</form>
</div>
</body>
</html>
My js code
var fbapp = angular.module('fbapp', []);
fbapp.controller('fbController', function($scope){
$scope.fetchUser = function() {
$scope.name = "Test";
}
}
Error I get
Error: [ng:areq] http://errors.angularjs.org/1.2.15/ng/areq?p0=fbController&p1=not%20a%20function%2C%20got%20undefined
at Error (native)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:6:450
at wb (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:18:360)
at Qa (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:18:447)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:65:470
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:52:156
at r (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:7:386)
at J (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:52:18)
at h (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:46:28)
at h (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:46:45)
It work for me if I don't declare container in a an app. Like...
function fbController ($scope){
$scope.fetchUser = function() {
$scope.name = "Test";
}
}
I am having no clue whats wrong.
as Stewie said you need to add closing parenthesis ' )'.
Example:
var app=angular.module('App', []);
app.controller('fbController', function($scope){
$scope.fetchUser = function() {
$scope.name = "Test";
}
})
html:
<div ng-app="App" >
<div ng-controller="fbController">
<button ng-click="fetchUser()">click</button>
<p >{{name}}</p>
</div>
</div>
Live example: http://jsfiddle.net/choroshin/7Ws6w/1/