I am new to angular.js just started learning, i want to Display the array defined in the Controller, But When I am trying to Display Its Showing empty page. I know if i change the ng-repeat=post in post1 to ng-repeat=post in posts" it ll work. But i want show the Error either in the Console or in the Browser. Please Can anybody help me.
var mainapp = angular.module('mainApp', []);
mainapp.controller('control', function ($scope) {
$scope.posts = [
{title: 'post 1', upvotes: 5},
{title: 'post 2', upvotes: 2},
{title: 'post 3', upvotes: 15},
{title: 'post 4', upvotes: 9},
{title: 'post 5', upvotes: 4}
];
});
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</head>
<body ng-app="mainApp" ng-controller="control">
<div ng-repeat="post in post1 | orderBy:'upvotes'">
<p>{{post.title}}-upvotes {{post.upvotes}}</p>
</div>
</body>
</html>
This is not an error at all from angular point of vew. In fact it is quite usual to use variables in template which are undefined for now, but will get some value later.
I.e. imagine that you have in controller:
$timeout(function() {
$scope.post1 = [{title : 'test'}];
}, 100)
Use ng-if directive to check "post1" is undefined and display error message.
<div ng-repeat="post in post1 | orderBy:'upvotes'">
<p>{{post.title}}-upvotes {{post.upvotes}}</p>
</div>
<div ng-if="post1==undefined">
Error Message
</div>
Related
I am trying to simplify my controller. So I tried to set variable to populate my checkbox list from outside controller. Is it possible?
Here is my current code http://jsfiddle.net/ilmansg/Lx37kr3e/1/
VIEW HTML
<div ng-controller="AdminEventsCtrl">
<h1>Array 1</h1>
<ul>
<li ng-repeat="item in array1">
<input type="checkbox" ng-model="formData.value1[item.value]" value="{{item.value}}" />
{{item.text}}
</li>
</ul>
<h1>Array 2</h1>
<script>
array2 = [{
text: 'Option 1',
value: 'opt1'
}, {
text: 'Option 2',
value: 'opt2'
}, {
text: 'Option 3',
value: 'opt3'
}, {
text: 'Option 4',
value: 'opt4'
}];
</script>
<ul>
<li ng-repeat="item in array2">
<input type="checkbox" ng-model="formData.value1[item.value]" value="{{item.value}}" />
{{item.text}}
</li>
</ul>
<pre>Array1= {{array1}}</pre>
<pre>Array2= {{array2}}</pre>
</div>
SCRIPT JS
var myApp = angular.module('myApp', []);
function AdminEventsCtrl($scope) {
$scope.formData = {};
$scope.array1 = [{
text: 'Option 1',
value: 'opt1'
}, {
text: 'Option 2',
value: 'opt2'
}, {
text: 'Option 3',
value: 'opt3'
}, {
text: 'Option 4',
value: 'opt4'
}];
}
No this is not possible because Angular would have no idea which scope to attach the array to. Here is a simplified solution to your problem of your controller being messy:
Have two arrays, one for each property text and value.
function AdminEventsCtrl($scope) {
$scope.formData = {};
$scope.array1 = [];
var t = ['Option 1', 'Option 2', 'Option 3'];
var v = ['opt1', 'opt2', 'opt3'];
for(i=0;i<t.length;i++){
$scope.array1.shift({text:t[i],value:v[i]});
}
}
This may be a little more code, but it looks a lot less messy. It also allows you to easily add in new values.
I end up making factory to hold all my arrays, then use that factory in my controller
I have a question about Angular.js scope.
Firstly I am very new to Angular and I have read the scope documentation and tried to understand it the best I can. I have a feeling my question is similar to this:
ng-show not binding as expected
However my example is simpler in nature and I still don't understand what I am missing.
My html is very simple, I have a controller that wraps everything:
<div ng-controller="ApplicationFormController"></div>
Inside this I have sections:
<div ng-controller="ApplicationFormController">
<button ng-click="previous()">previous</button>
<button ng-click="next()">previous</button>
<p> You are on section #1 </p>
<div class="section1" ng-show="{{ section.id == 1 }}"> Section 1 </div>
<div class="section2" ng-show="{{ section.id == 2 }}"> Section 2 </div>
<div class="section3" ng-show="{{ section.id == 3 }}"> Section 3 </div>
</div>
As you can see I intend to show the section when it is applied to the controller.
My application logic is as follows:
app.controller('ApplicationFormController', ['$scope', function($scope) {
$scope.sections = sections;
$scope.section = $scope.sections[0];
$scope.next = function() {
var index = $scope.sections.map(function(x){
return x.id;
}).indexOf($scope.section.id);
$scope.section = $scope.sections[index+1];
};
$scope.previous = function() {
var index = $scope.sections.map(function(x){
return x.id;
}).indexOf($scope.section.id);
$scope.section = $scope.sections[index-1];
};
}]);
The sections array is as follows:
var sections = [
{
id: 1,
name: 'Section 1',
steps: [
{
id: 1,
name: 'Step 1',
},
{
id: 2,
name: 'Step 2',
},
{
id: 3,
name: 'Step 3',
},
]
},
{
id: 2,
name: 'Section 2',
steps: [
{
id: 1,
name: 'Step 1',
},
{
id: 2,
name: 'Step 2',
},
{
id: 3,
name: 'Step 3',
},
]
}
];
Very simple stuff.
So the issue lies in the showing and hiding.
When I trigger the next or previous event it runs, I can see this because the <p> tag updates with the appropriate id eg: if I press next the p tag will update to reflect:
<p>You are on section #2</p> as expected.
The odd thing is the section that is currently showing doesn't update. Section one in this case will stay visible while section two will stay hidden.
What is preventing the DOM from updating to reflect the current state of the controller.
That is because ng-show takes an expression upon which a watch is set internally. But you are providing value of expression (boolean string) by using interpolation ({{). So watch never executes afterwards since scope.$watch(attr.ngShow,...) will be evaluating scope['true/false'] instead of actual expression you intended to.
Change:
<div class="section1" ng-show="{{ section.id == 1 }}"> Section 1 </div>
to
<div class="section1" ng-show="section.id == 1"> Section 1 </div>
and so on for others too.
I use Angular and Bootstrap to represent a data grid and give user some control over it (edit data, etc.). The data set is array of objects, each object has a group property, which is not unique and represents what group a record refers to.
So, the dataset looks like
[
{
id: 1,
group: 'A',
value: 'John'
}, {
id: 2,
group: 'A',
value: 'Jake'
}, {
id: 3,
group: 'B',
value: 'Jack'
}
]
I want Angular to output
<div class="row group">
<div class="col-md-12">A</div>
</div>
<div class="row sample">
<div class="col-md-4">1</div>
<div class="col-md-8">John
<div>
...
I tried ng-repeat but it only allows to fold arrays one into another, so the {{ group }} will be a top element and {{ elementOfAGroup }} will be its child. I need a final markup to be a plain set of DOM elements.
I googled for a solution but the only I've found were simple components (directives) that allow making up tables.
I have used custom "uniq" filter to accomplish this:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.1.1/angular-filter.js"></script>
</head>
<body ng-app="plunker" ng-controller="MainCtrl">
<div class="row group" ng-repeat="data in dataset | uniq: 'group'">
<h3>{{data.group}}</h3>
<div class="col-md-12" ng-repeat="child in dataset | filter: { group: data.group }">{{child.value}}</div>
</div>
</body>
<script>
var app = angular.module('plunker', ['angular.filter']);
app.controller('MainCtrl', ['$scope', '$sce', function($scope, $sce) {
$scope.dataset = [
{
id: 1,
group: 'A',
value: 'John'
}, {
id: 2,
group: 'A',
value: 'Jake'
}, {
id: 3,
group: 'B',
value: 'Jack'
}
];
}]);
</script>
</html>
It may be slow with large data set.
I am reading an AngularJS book. I copied the following code from the book:
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<title>Your Shopping Cart</title>
</head>
<body ng-controller='CartController'>
<h1>Your Order</h1>
<div ng-repeat='item in items'>
<span>{{item.title}}</span>
<input ng-model='item.quantity'>
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
<button ng-click="remove($index)">Remove</button>
</div>
<script src="js/lib/angular.min.js"></script>
<script>
function CartController($scope) {
$scope.items = [
{title: 'Paint pots', quantity: 8, price: 3.95},
{title: 'Polka dots', quantity: 17, price: 12.95},
{title: 'Pebbles', quantity: 5, price: 6.95}
];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
}
</script>
</body>
</html>
I have the angular.min.js in place. However, I got this output from Chrome:
Apparently, there is something wrong with the code. However, as a newbie, I cannot tell where it is. Your help is greatly appreciated. Thank you very much.
update
Here is the error output:
Failed to instantiate module myApp due to:
Error: [$injector:nomod] http://errors.angularjs.org/1.2.10/$injector/nomod?p0=myApp
at Error (native)
at http://localhost:63342/angular-book/js/lib/angular.min.js:6:450
at http://localhost:63342/angular-book/js/lib/angular.min.js:20:260
at http://localhost:63342/angular-book/js/lib/angular.min.js:21:262
at http://localhost:63342/angular-book/js/lib/angular.min.js:29:175
at Array.forEach (native)
at q (http://localhost:63342/angular-book/js/lib/angular.min.js:7:280)
at e (http://localhost:63342/angular-book/js/lib/angular.min.js:29:115)
at $b (http://localhost:63342/angular-book/js/lib/angular.min.js:32:232)
at Zb.c (http://localhost:63342/angular-book/js/lib/angular.min.js:17:431
You must register the CartController with your app "myApp"
One way to do it:
angular.module('myApp').controller('CartController',['$scope', function ($scope) {
$scope.items = [
{title: 'Paint pots', quantity: 8, price: 3.95},
{title: 'Polka dots', quantity: 17, price: 12.95},
{title: 'Pebbles', quantity: 5, price: 6.95}
];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
}]);
The AngularJS book from O'Reilly has lots of errors in it. You will have to fix lots of the code samples.
At the top of your app, you reference the name of the app, but don't register it.
<html ng-app='myApp'>
If you give a value here, you have to define the module.
angular.module('myApp', []);
You can also can assign the module to a variable for easy reference when you create controllers, etc:
var myApp = angular.module('myApp', []);
myApp.controller('myController',
function myController($scope){
};
But for a simple angular app using just one page of code, the easiest solution for your code is to just not assign a value to the ng-app attribute:
<html ng-app>
My complete working code for this example was:
<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>Your Shopping Cart</title>
</head>
<body ng-controller='CartController'>
<h1>Your Order</h1>
<div ng-repeat='item in items'>
<span>{{item.title}}</span>
<input ng-model='item.quantity'>
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
<button ng-click="remove($index)">Remove</button>
</div>
<script src="js/angular.min.js"></script>
<script>
function CartController($scope) {
$scope.items = [
{title: 'Paint pots', quantity: 8, price: 3.95},
{title: 'Polka dots', quantity: 17, price: 12.95},
{title: 'Pebbles', quantity: 5, price: 6.95}
];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
}
</script>
</body>
</html>
As Luke mentioned, you must define myApp somewhere. Dependencies (controllers, directives, etc) should be injected there:
angular.module('myApp', [
// myApp dependencies (controllers, etc.) injected here...
'myApp.controllers'
]).
config(['$routeProvider', function($routeProvider) {
// your routes here...
}]);
Then you have your controller, which is what gets injected...
angular.module('myApp.controllers', []).
controller('MyCtrl', [function() {
}]);
If you haven't already, take a look at the Angular seed project. This is an outstanding resource for anyone ramping up with Angular.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 8 years ago.
Improve this question
I ma learning and its my first day to angular js ! though I have learned how model-controller-views works in angular js,the fowllowing code not showing the variables,instead it gives normal {{}} HTML views without ng-repeat working :
<html ng-app='myApp'>
<head>
<title>Your Shopping Cart</title>
</head>
<body ng-controller='CartController'>
<h1>Your Order</h1>
<div ng-repeat='item in items'>
<span>{{item.title}}</span>
<input ng-model='item.quantity'>
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
<button ng-click="remove($index)">Remove</button>
</div>
<script src="lib/angular.js"></script>
<script>
function CartController($scope) {
$scope.items = [
{title: 'Paint pots', quantity: 8, price: 3.95},
{title: 'Polka dots', quantity: 17, price: 12.95},
{title: 'Pebbles', quantity: 5, price: 6.95}
];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
}
</script>
</body>
</html>
Whats wrong with the code?
Just replace
<html ng-app='myApp'>
with
<html ng-app>
and it should work.
With ng-app='myApp' you tell angularjs that you have a module called myApp. But you define no module.
You should define your myApp module:
var app = angular.module('myApp', []);
app.controller('CartController', ['$scope', function($scope) {
$scope.items = [
{title: 'Paint pots', quantity: 8, price: 3.95},
{title: 'Polka dots', quantity: 17, price: 12.95},
{title: 'Pebbles', quantity: 5, price: 6.95}
];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
}]);
DEMO
Basically you didn't define module in controller.
<script>
angular.module('myApp', []); // add this line
function CartController($scope) {
$scope.items = [
{title: 'Paint pots', quantity: 8, price: 3.95},
{title: 'Polka dots', quantity: 17, price: 12.95},
{title: 'Pebbles', quantity: 5, price: 6.95}
];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
}
</script>
Your Demo in Plunker