angular-chart.js has a bar-chart example is here. From here I used that js and markup code with some modification like this.
html
<body ng-app="app">
<div class="row">
<div class="col-md-6">
<div ng-controller="BarCtrl">
<canvas id="bar" class="chart chart-bar"
chart-data="data" chart-labels="labels" chart-series="series" chart-options="options" >
</canvas>
</div>
</div>
</div>
js
var app = angular.module('app', ['chart.js']);
app.controller('BarCtrl', ['$scope', function($scope){
$scope.labels = ['PDM', 'R&D', 'SN', 'MB'];
$scope.series = ['Late', 'NoLate'];
$scope.data = [
[10,2,1,2],
[5,3,2,4]
];
}]);
for more check https://plnkr.co/edit/jIqY72Lg4YvkMNbmawyC?p=preview
But the problem is my code doesn't show like with the marked option.
What I do wrong or any update I have to do?
You need to configure under options,
$scope.options = {
legend: {
display: true,
position: 'top'
}
};
DEMO
Related
Hi I am using kenwheeler slick carousel but when I use ng-repeat on the div i get `listed images'.
What I a doing wrong here ?
<section class="regular slider" style="clear: both" ng-if="slides">
<div ng-repeat="slide in slides">
<img src="{{slide.path}}">
</div>
</section>
I tried the solutions provided here angular slick although its different but still no proper images are being displayed. without ng-repeat it works perfect.
The output is something like this image
My controller
$scope.single_product = function (product_id) {
$http.get('abc',
{headers:
{'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': $rootScope.keyword_auth_token}
})
.success(function (data) {
$scope.product = data;
$(".regular").slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: true,
autoplaySpeed: 2000
});
})
.error(function (data) {
console.log(data);
});
};
I am including slick.css slick-theme.css and slick.jshere is the link to all Files
Instead of src Use ng-src ng-src use to get the path of image in angularJS
Go through this link carefully and apply styles
http://kenwheeler.github.io/slick/
remove div that contains ng-repeat
<section class="regular slider" style="clear: both" ng-if="slides">
<img ng-repeat="slide in slides" ng-src="{{slide.path}}">
</section>
Use ng-src
var app = angular.module("myApp", []);
app.controller('myCtrl', function($scope) {
$scope.slides = [{
path: 'https://cloud.githubusercontent.com/assets/1734769/3162502/f49ff416-eb35-11e3-8f47-3a85f8abfd84.png'
}, {
path: 'https://cloud.githubusercontent.com/assets/1734769/3162502/f49ff416-eb35-11e3-8f47-3a85f8abfd84.png'
}, {
path: 'https://cloud.githubusercontent.com/assets/1734769/3162502/f49ff416-eb35-11e3-8f47-3a85f8abfd84.png'
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<section class="regular slider" style="clear: both" ng-if="slides">
<div ng-repeat="slide in slides">
<img ng-src="{{slide.path}}">
</div>
</section>
</div>
Try this:
<div ng-repeat="slide in slides">
<img ng-src="slide.path">
</div>
Check angular-slick README and include all css and js. Add slick to your angular.module [ let say MyApp ] dependency and use slick directives. I think you missed to use slick directives.
<section class="regular slider" style="clear: both" ng-if="slides">
<slick slides-to-show=3 slides-to-scroll=3>
<div ng-repeat="slide in slides">
<img src="{{slide.path}}">
</div>
</slick>
</section>
I'm an Angular beginner.
I want to load a json on load, this works well
but if I make a change to an input field, I get an error message.
Error: $rootScope:infdig Infinite $digest Loop
Thanks
My HTML
<body ng-app="myApp" ng-controller="mainCtrl">
<div id="wrapper">
<header style="height:50px;"> </header>
<div class="container">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="js/controller.js"></script>
<section>
<div class="col-md-4">
<label for="words">Wörter</label>
<input ng-model="words" id="words" type="number" name="words" placeholder="Wörter" min="10" max="10000" value="{{words}}" step="10">
</div>
<p>{{words}}</p>
<div id="view" class="col-md-6">
<ul ng-controller="loadContent">
<li ng-repeat="content in contents | orderBy:random">{{content.text}}</li>
</ul>
</div>
</section>
</div>
</div>
My javascript
var app = angular.module('myApp', []);
app.controller('mainCtrl', function ($scope, $http) {
$scope.words = 40;
$scope.letterLimit = 400;
});
app.controller('loadContent', function ($scope, $http) {
$scope.random = function () {
return 0.5 - Math.random();
}
$scope.loadContent = function() {
var def = $http.get('data.json').success(function(data) {
$scope.contents = data;
});
}
$scope.loadContent();
});
My json
[
{"text": "Lorem ipsum1", "date" : true},
{"text": "Lorem ipsum2", "data" : true},
{"text": "Lorem ipsum3", "data" : true}
]
I think that angular is continuously disgesting your controller as soon as you interact with the view, and is therefore executing $scope.loadContent(); at the bottom of your controller repeatedly.
I assume you only wish for this to fire once? If so, remove the function call from your controller and modify your view as below.
<body ng-app="myApp" ng-controller="mainCtrl" ng-init="loadContent">
With this, $scope.loadContent is only called once. if you wish to call it another way, or multiple times, please specify in your question.
I am grabbing data from a JSON file, each object has it's on individual message. At the moment i am struggling to find a way show and hide messages separately. For example when i click on object i want to display credentials from that object only and not show credentials from the other objects.
var app = angular.module('app', []);
app.controller('mainCtrl', function($scope) {
$scope.colors = [
{
"color":"red",
"value":"#f00",
"message":"Simple message"
},
{
"color":"green",
"value":"#0f0",
"message":"Message with <strong>HTML</strong> tags"
},
{
"color":"blue",
"value":"#00f",
"message":"Am I going to work? I should not!"
}
]
$scope.popupBtn = function (message) {
$scope.currentMessage = message;
if (!($scope.popupBlock)) {
$scope.popupBlock = true;
}
}
});
HTML
<body ng-controller="mainCtrl">
<ul class="block-elements">
<li ng-repeat="details in colors">
<button ng-click="popupBtn(details.mesage)" ng-style="{ color: details.color }">Click Me</button>
</li>
</ul>
<div class="alert-block" ng-class="{'popup-container': popupBlock}">
<div ng-repeat="text in colors">
<a>{{text.message}}</a>
</div>
</div>
</body>
It's better if you treat the data inside your view separate from the controller.
var app = angular.module('app', []);
app.controller('mainCtrl', function($scope) {
$scope.colors = [
{
"color":"red",
"value":"#f00",
"message":"Simple message"
},
{
"color":"green",
"value":"#0f0",
"message":"Message with <strong>HTML</strong> tags"
},
{
"color":"blue",
"value":"#00f",
"message":"Am I going to work? I should not!"
}
]
$scope.currentMessage = "";
$scope.popupBtn = function (message) {
// set current message
$scope.currentMessage = message;
// if popup is not open, open it
if (!($scope.popupBlcok)){
$scope.popupBlock = true;
}
}
});
.alert-block {
background-color: coral;
color: white;
display: none;
}
.popup-container {
display: block;
}
<body ng-app="app">
<div ng-controller="mainCtrl">
<ul class="block-elements">
<li ng-repeat="details in colors">
<button ng-click="popupBtn(details.message)" ng-style="{ color: details.color }">Click Me</button>
</li>
</ul>
<div class="alert-block" ng-class="{'popup-container': popupBlock}">
<div>
<a>{{currentMessage}}</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
</div>
</body>
You can use ng-show directive:
<a ng-show = "YOUR_CONDITION">{{text.message}}</a>
replace YOUR_CONDICTION with your condition, for example:
ng-show = "text.color == red"
Hopes that helps.
A simple solution would be to use an Angular accordion from the Angular UI components: http://angularui.github.io/bootstrap/
<uib-accordion close-others="oneAtATime">
<div ng-repeat="text in colors">
<uib-accordion-group heading="{{text.color}}" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
{{{text.message}}}
</uib-accordion-group>
</div>
</uib-accordion>
An example: http://plnkr.co/edit/ttdSZmEWJwwfBwuHTghG?p=preview
This will give you what you're looking for I think - to show only the "opened" message, and hiding the others.
Alternatively, you could roll your own directive that loops through the siblings and hides all the messages, then shows the selected message.
I'm trying to get to grips with AngularJS and had this working to echo individual things from a controller, but when I tried to incorporate a loop with ng-repeat all I get is {{tasks.title}} flashing onscreen for a second, then a blank empty div.
Any examples I've looked up seem a little different and I've tried a few ways, can anyone see where I'm going wrong?
Controller:
app.controller('MainController', ['$scope', function($scope) {
$scope.tasklist = {
tasks: [{
title: 'Wash Dog'
}, {
title: 'Email Joe'
}]};
}
]);
HTML:
<section class="panel">
<div ng-controller="MainController">
<div class="thumbnail" ng-repeat="tasks in tasklist">
<p>{{ tasks.title }}</p>
</div>
</div>
</section>
You are accessing the property tasklist not the actual tasks. It should be tasklist.tasks
<section class="panel">
<div ng-controller="MainController">
<div class="thumbnail" ng-repeat="tasks in tasklist.tasks">
<p>{{ tasks.title }}</p>
</div>
</div>
</section>
Another way would be to remove the tasks property:
app.controller('MainController', ['$scope', function($scope) {
$scope.tasklist = [
{
title: 'Wash Dog'
},
{
title: 'Email Joe'
}
];
}]);
Why I can't change value using function? AngularJS
html:
<div ng-controler='TestCtrl' id='TestCtrl'>
<h1>Test: {{test.name}}</h1>
<div ng-hide='showTest'>
<div class='content'>
<p>First name: <input ng-model='firstName'></p>
<p>Last name: <input ng-model='lastName'></p>
</div>
<div jq-ui-button ng-click='doSth()'>
Do something
</div>
</div>
</div>
JS:
app.controller('TestCtrl', function ($scope) {
$scope.showTest = false;
$scope.test = {name:'Test name'};
$scope.doSth = function() {
$scope.showTest = true;
}
}
It does not work. But when I write:
<div jq-ui-button ng-click='showTest = true'>
It works.
Where is the problem?
You must write ng-controller not ng-controler. That's why your code is not used. First line in your HTML.