I have done a sample app with angular js and added a ng-repeat to loop my data but it's not looping it. I have shown my code below
<li style="background: white url('{{book.imgUrl}}') no-repeat" ng-repeat="book in books">
<div>
<h3>{{book.name}}</h3>
<p>{{book.price}}</p>
<ul>
<li>Rating: {{book.rating}}</li>
<li>Binding: {{book.binding}}</li>
<li>Publisher: {{book.publisher}}</li>
<li>Released: {{book.releaseDate}}</li>
</ul>
<p>{{book.details}}</p>
<button class="btn btn-info pull-right" ng-click="addToKart(book)">Add to Kart</button>
</div>
</li>
I have created a live demo of the problem here
In order to get value in view from controller , you have to bind that with $scope.
Your books variable isn't bind with scope
Convert this
var books=[
to this
$scope.books=[
or like this
$scope.books=books
DEMO
In your controller, instead of using
var books
use
$scope.books
You are close.
Instead of var book you need to glue book variable with $scope
Like
$scope.book=[{
// Rest of code
}]
Also first pass the dependency as string else you may see error during minification
app.controller('BookListCtrl',["$scope", function($scope) {
// Rest of code
}])
Try this
Use $scope.books instead of var books = [];
You should use $scope.books instead of var books.
DEMO
Assign your book in specific controller scope object parameter as per below
app.controller('BookListCtrl', function($scope) {
$scope.books=books;
})
Related
I am new to angularjs and I have been trying out few basic tutorials and I noticed some discrepancy on how controller is declared and used thus I wanted clarification
, for example in this JSfiddle link - http://jsfiddle.net/dakra/U3pVM/ the user has defined the controller as the function name which works perfectly fine for version 1.0.3 . I am using 1.3.15 version of angular and this approach isn't working for me
<html ng-app="myapp">
AngularJS data binding
<div data-ng-controller="SimpleController">
Name :
<br/>
<input type="text" ng-model="name"/>{{name |uppercase}}
<div>
<ul>
<li ng-repeat="personName in names">{{personName}}</li>
</ul>
</div>
</div>
<script src="node_modules/angular/angular.min.js"></script>
<script>
function SimpleController($scope) {
$scope.names =['test1','test2','new'];
}
The above code just isn't working as it's showing an error of SimpleController being undefined function.
where as when I add this code instead of the above function, it works -
var app = angular.module('myApp', []);
app.controller('SimpleController', function($scope) {
$scope.names = ['test1','test2'];
});
Thanks,
The simple declaration of controllers via
function MyCtrl($scope) {
}
was removed in Angular 1.3. Breaking changes: http://wildermuth.com/2014/11/11/Angular_1_3_and_Breaking_Change_for_Controllers
I'm trying to implement a feature using Angular and Boostrap where the user can get a popOver on an item in the list, and have it perform an angular factory $http.get function to retrieve data and populate the popover text.
I'm not sure this is the best approach, but I have a ng-repeat like so:
<ul>
<li ng-repeat="product in products">
<model-popover ng-attr-id="{{product.Id}}"></model-popover>
</li>
</ul>
And my best guess is to use an angular directive, taking in the id number as a scope attribute,and performing a factory call from the directive. I've read up on the controller/link functions within the directive, but not sure the proper implementation
app.directive('modelPopover', ['Factory', function (Factory) {
return {
restrict: 'E',
replace: true,
scope: { id: "=" },
controller: function($scope){
var prod = Factory.getProductDetail(id);
},
template: '<a popover-placement="bottom" popover="{{prod}}">{{prod}}</a> '
};
}]);
I know the directive is incorrect, but i'm hoping there's enough information to help me out. Thanks in advance!
You do not need special directive for this, due to value-binding u can just change scope variable and popover will change also.
So u simply:
<button popover="{{var}}" popover-trigger="mouseenter" class="btn btn-default" ng-mouseover="changeVar()">Mouseenter</button>
And in changeVar you can change $scope.var any way you want.
Here is example plunk ($http call emulated using $timeout):
http://plnkr.co/edit/gnm1BtnHzNLnvO62Ar2i?p=preview
This var prod = Factory.getProductDetail(id);
has to be changed to $scope.prod = Factory.getProductDetail(id) if you want to use the mustaches
I have a controller that returns an array, I'm trying to display every element of that array as a list.
What I am attempting to do, which is not working:
<li ng-repeat="Name in names">
<a ng-controller="PostsCtrl" href="#">{{response.text}}</a>
</li>
response.text returns an array from the controller.
I am also wondering, what is the value of the ng-repeat attribute supposed to be, any unique string?
Thank you!
Define the array in your controller with the $scope variable:
app.controller('PostsCtrl', function($scope) {
$scope.response = { text: ['hello', 'world'] };
}
Then use ng-repeat on the VARIABLE, not the controller.
<div ng-controller="PostsCtrl">
<ul>
<li ng-repeat="name in response.text">{{name}}</li>
</ul>
</div>
The controller is only used to define what $scope variables you can use in that section, and is not used as a variable itself.
ngRepeat is basically just like a for loop. There is no default value, you just need to give it the data you want it to iterate through. So when you're doing a ng-repeat="name in names", it is similar to doing something like for(var name in names){} in plain javascript. For it to work properly you need to pass this data to the template via your $scope, as such:
var myApp = angular.module('myApp', []);
myApp.controller('PostsCtrl', ['$scope', function($scope){
// Here the array would be your response.text:
$scope.names = ['John', 'Jessie', 'Johanna', 'Joy', 'Mary', 'Peter', 'Sebastian', 'Erika', 'Patrick', 'Samantha'];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="PostsCtrl">
I have {{names.length}} friends. They are:
<ul>
<li ng-repeat="name in names">
[{{$index + 1}}] {{name}}.
</li>
</ul>
</div>
</div>
For further reading, please visit: https://docs.angularjs.org/api/ng/directive/ngRepeat
You probably have your controller on the wrong attribute there, unless you want a new controller for every item in the array.
The second issue, "response.text returns an array from the controller." So, is this the array you want to repeat?
<div ng-controller="PostsCtrl">
<li ng-repeat="item in response.text">
{{item}}
</li>
</div>
And then the third question, what is the value of the ng-repeat attribute supposed to be: it's supposed to be the value of any valid array on your $scope or viewModel. So, response.text would be a valid item to put on the ng-repeat since it is an array. As I have it above, you now have an item object for every item in reponse.text. If this is as far down as you want to go, you can simply print {{item}} -- if item has properties, you could do something like, for instance, {{item.someProperty}}
New to angular, and did the codeschool course + the angular video from railscasts.
so this is my controller in the html file
<div ng-controller="ProviderDataCtrl">
<ul>
<li ng-repeat="entry in entries">
{{entry.name}}
</li>
</ul>
</div>
and this is the javascript file holding the controller
(function(){
app.controller('ProviderDataCtrl',function($scope){
$scope.entries = [
{name:"test"}
{name:"test2"}
{name:"test3"}
]
}]);
})();
for some reason in my html file, it just shows as {{entry.name}} and only 1 of it.
I cant seem to figure out the problem. Did i define the controller wrong in the js file??
Thanks
app is undefined
First define your angular app before using it
var app = angular.module('test',[]);
Demo Plunkr
I am new to AngularJS. When i am creating a controller, I have seen two examples which show how to do it differently. How ever the one that most show is the way to do it doesnt work.
The issue with the first one, is that it either can't find the module, or it cant find the function. And it ends up just as {{type}} {{name}}. How ever if i try on plnkr then the first one works.
'dataControl' is not a function, got undefined
Is the error i am getting
If i have my html as this.
<html ng-app>
<head>
</head>
<body ng-app="docsBindExample">
<script src="../bower_components/angular/angular.min.js"> </script>
<script src="../scripts/controllers/main.js"></script>
<div ng-controller="dataControl">
<select id="selected" ng-model="type">
<option>Total Revenue</option>
<option>Total Expenditure</option>
<option>Total Number of Events</option>
<option>Amount of Mail</option>
<option>Average Delivery Times</option>
<option>Critical Routes</option>
</select>
{{type}}
{{data}}
<ul>
<li ng-repeat="values in data">
{{values.dataName}}
{{values.dataValue}}
</li>
</ul>
</div>
</body>
</html>
And then the first controller, that doesnt work.
angular.module('docsBindExample', [])
.controller('dataControl', ['$scope', function($scope) {
$scope.name = 'Value Is here';
}]);
Secondly, the other controller that does work
function dataControl ($scope) {
$scope.name = 'Value Is here';
}
Is there any draw back from using the second ?
There is no any such drawback using the second approach. However the first approach is quite convenient one for the big applications as you will be defining your modules and registering controllers, filters etc against your modules. The reason behind your first approach is not working is may be you have not defined docsBindExample module. Trying doing this:
var docsBindExample = angular.module('docsBindExample', []);
and then your controller definition.
Try using the following
Working Demo
html
<div ng-app="docsBindExample">
<div ng-controller="dataControl">
<select id="selected" ng-model="type">
<option>Total Revenue</option>
<option>Total Expenditure</option>
<option>Total Number of Events</option>
<option>Amount of Mail</option>
<option>Average Delivery Times</option>
<option>Critical Routes</option>
</select>
{{type}}
{{data}}
<ul>
<li ng-repeat="values in data">
{{values.dataName}}
{{values.dataValue}}
</li>
</ul>
</div>
</div>
script
var app = angular.module('docsBindExample', []);
app.controller('dataControl', function ($scope) {
$scope.name = 'Value Is here';
});
Syntactically both works perfect but the first approach is recommended than the second one. In first approach the controller will be attached to that module and is been a good practice for building an application.
For more details visit this link
https://docs.angularjs.org/guide/controller
And there is no error when I executed your code.
Your code is working for me!!!!
Check: http://plnkr.co/edit/hrkSDOinTcMEmPLcttut
Maybe this links from Stackoveflow works for you!!!
AngularJS - different ways to create controllers and services, why?
Globally defined AngularJS controllers and encapsulation
The first is definitely the recommended way (if nothing else because it does to polute the global object).
I haven't tried it myself, but I am pretty sure you are going to run into trouble when your application becomes more complex (with more than 1 modules and/or external dependencies).
The error you get is probably due to some JS error (e.g. a syntax error) which csuses the dataControl to fail registering as a controller.
Unfortunately, such errors are annoyingly undescriptive and hard to track down.
I suggest commenting out all the code inside the controller definition and then uncomment block by nlock until you find the problematic line.
For me, more than a few times, such errors where caused by a wrong object declaration:
E.g. {prop = val} instead of {prop: val} or {p1:v1; p2:v2} instead of {p1:v1, p2:v2}
try changing it to:
.controller('dataControl', function($scope) {
//more code
});