Create multiple divs using ng-repeat - javascript

I want to create 'n' red blocks with text (n here means the number of elements in array). But, I am getting a blank page.
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<style>
.card-main {
width: 100px;
height: 100px;
border: 1px solid red;
background-color: red;
}
</style>
<!-- look here start -->
<div class="card-main" ng-app="myApp" ng-controller="myCtrl" ng-repeat="x in type">
<p>{{x}}</p>
</div>
<!-- look here end -->
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.type = ["Any", "T1", "T2", "T3"];
$scope.state = ["Any", "S1", "S2"];
});
</script>
</body>
</html>

ng-repeat has very high priority, it is applied before ng-controller e.g.
<div ng-repeat="..." ng-controller="..."
will render several divs with several controller instances, not several divs inside one controller.
To start, just put ng-app, ng-controller and ng-repeat on different elements:
<div ng-app ...
<div ng-controller ...
<div ng-repeat ...

Related

Ui Bootstrap (angularjs) sidenav doesn't work as intended

I have a problem with a sidenav which I'm trying to create for one of my projects. My intention is to create a side menu which pushes the content to the right when is opened and when closed the content should move back to the left, sort of a toggle function. For some reason my ternary operator doesn't work as intended.
Here is my snippet:
<!doctype html>
<html lang="en">
<html ng-app="uiBootstrapBlog">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="navbarCtrl">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li style="font-size:30px; cursor:pointer;color:white" ng-click="isCollapsedHorizontal = !isCollapsedHorizontal" ng-model="singleModel" uib-btn-checkbox>☰</li>
</ul>
</div>
</nav>
<div style="position: fixed; width: 230px">
<div class="horizontal-collapse" uib-collapse="isCollapsedHorizontal" horizontal style=" margin-top: 50px !important; min-height: 150px; max-height: 80vh; background: gray; color: black; padding-top: 25px;" >
</div>
</div>
<div style="position: absolute; top: 60px; transition: left .5s;" id="main">grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br></div>
</div>
</body>
</html>
<script>
var uiBootstrapBlog = angular.module('uiBootstrapBlog', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
uiBootstrapBlog.controller('navbarCtrl', function($scope) {
$scope.singleModel = false;
var menuSlide = document.getElementById("main");
$scope.singleModel === false ? menuSlide.style.left = "250px" : menuSlide.style.left = "0";
});
</script>
It does not work because the codes gets called only once after the initialisation. Follow these three steps to fix the issue
Define a function and put isCollapsedHorizontal and the last two lines of code inside of it.
Your ternary operator has also an issue. Assign the variable that gets changed to the result of it.
Call the function inside the controller and with the ng-click.
$scope.slideMenu = function() {
$scope.isCollapsedHorizontal = !$scope.isCollapsedHorizontal;
var menuSlide = document.getElementById("main");
menuSlide.style.left = $scope.singleModel ? "250px" : "0";
}
$scope.slideMenu();
<li style="font-size:30px; cursor:pointer;color:white" ng-click="slideMenu()" ng-model="singleModel" uib-btn-checkbox>☰</li>

Angular Js hide Div one by one with animation

I am looking to fadeout all Div (with css property display set to inline:block) with same class randomly one-by-one until 1 last random div remains. I am certainly able to do it with jquery but I am unable to make it work with fadeOut inline:block property.
So my div are aligned next to each other like
and I would need to hide them randomly one by one.
After a random div is removed
the removed div space should be retained as in css property visibility:hidden and the last div number which is left will be shown in JavaScript alert.
Here is my staring code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="lib/style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-animate.min.js"></script>
<script src="lib/script.js"></script>
</head>
<body class="container" ng-app="animateApp" ng-controller="mainController">
<div class="row">
<div class="col-xs-12">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</div>
</body>
</html>
Here is the fiddle https://plnkr.co/edit/OG1EmWjQi1bHj5OC69Z7?p=info
Any help is really appreciated.
You can define how items are hidden through the ng-hide CSS class. You can override the display attribute to keep it as inline-block, and use CSS animations to fade it away.
// Add your code here
angular.module("animateApp", [])
.controller("mainController", function($scope, $timeout) {
$scope.data = [1, 2, 3, 4, 5];
var hidden = [];
$scope.shouldHide = function(index) {
return hidden.indexOf(index) >= 0;
};
function hideRandom() {
if ($scope.data.length - 1 < hidden.length) {
return;
}
var randomTime = Math.floor(Math.random()*1000)
var randomElem = Math.floor(Math.random()*$scope.data.length);
while (hidden.indexOf(randomElem) >= 0) {
randomElem = Math.floor(Math.random()*$scope.data.length);
}
$timeout(function() {
hidden.push(randomElem);
hideRandom();
}, randomTime);
}
hideRandom();
});
/* Add your styles here */
.item{
height:30px;
width:30px;
display:inline-block;
border:1px solid #000000;
}
.item.ng-hide {
transition:0.5s linear opacity;
opacity:0;
display:inline-block !important;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-animate.min.js"></script>
</head>
<body class="container" ng-app="animateApp" ng-controller="mainController">
<div class="row">
<div class="col-xs-12">
<div class="item" ng-repeat="i in data track by $index" ng-show="!shouldHide(i)">{{i}}</div>
</div>
</div>
</body>
</html>

How to set border style for img element in AngularJS

This is a beginners question in AngularJS.
I'm writing a simple application to show a few images and allow the user to toggle selection. Only one image should be selected at any one time.
Anyway, how to set the style to change the border for the img tag. When the user clicks on an image the style should be set. Neither setting the style or custom style myStyle is working (style not applied).
<!DOCTYPE html>
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script >
function myCtrl($scope, $window) {
$scope.vm = {};
$scope.vm.Courses = [
{ Id: 1, Name: "Course 1"},
{ Id: 2, Name: "Course 2"}
];
$scope.ToggleCourse = function(imageElement) {
console.log("id = " + imageElement.id);
imageElement.style = "{border:'2px solid blue'}"; // doesnt work
imageElement.myStyle = "{border:'2px solid blue'}"; // neither does this///
}
}
</script>
</head>
<body ng-controller="myCtrl">
<div>
<div ng-repeat="course in vm.Courses">
<div>
<div ng-click="ToggleCourse($event.target)">
<label>{{course.Name}}</label>
<img id="card{{course.Id}}" src="course.png" ng-style="myStyle">
</div>
</div>
</div>
</div>
</body>
</html>
You are doing it wrong. Don't use DOM manipulations at all. Just forget about this possibility until you understand why. Instead use ngClass directives (also don't use ngStyle):
<!DOCTYPE html>
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script >
function myCtrl($scope, $window) {
$scope.vm = {};
$scope.vm.Courses = [
{ Id: 1, Name: "Course 1"},
{ Id: 2, Name: "Course 2"}
];
$scope.ToggleCourse = function(course) {
$scope.selected = course;
}
}
</script>
<style>
.selected img {border: 2px solid blue;}
</style>
</head>
<body ng-controller="myCtrl">
<div>
<div ng-repeat="course in vm.Courses">
<div>
<div ng-click="ToggleCourse(course)" ng-class="{selected: course === selected}">
<label>{{course.Name}}</label>
<img id="card{{course.Id}}" src="course.png" ng-style="myStyle">
</div>
</div>
</div>
</div>
</body>
</html>
Replace the ng-style="myStyle" with:
ng-class="myStyle"
And define the class in CSS:
.myStyle {border: 2px solid #999;}
The above is the cleaner method as it just sets the necessary class for the <img /> element and you can style it, so that the presentation and styles are separated. You can also use the $scope and define a function and inject the styles.

" Cannot read property 'then' of undefined" in angular drag n drop

I am trying to use angular drag and drop http://codef0rmer.github.io/angular-dragdrop, but when I am trying a basic example, i am getting the error. My code -
<apex:page standardStylesheets="false" sidebar="false" showHeader="false">
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
</style>
<html ng-app="myApp">
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-responsive.min.css" rel="stylesheet" />
<div ng-controller="dragDropController">
<div class="row-fluid">
<div class="span6">
<div class="btn btn-primary" data-drag="true" ng-model="list" jqyoui-draggable="{animate: true}">{{list.title}}</div>
</div>
<div class="span6">
<div class="thumbnail" data-drop="true" ng-model="droppedList" jqyoui-droppable="{beforeDrop: 'beforeDrop'}"></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script src="{!$Resource.AngularDragDrop}" />
<script>
angular.module('myApp', ['ngDragDrop']).controller('dragDropController', function($scope, $http) {
$scope.list = {title : 'Drag me..!!'}
$scope.droppedList = {title: 'Drop place'};
$scope.beforeDrop = function() {
console.log('Before dropping..!!');
};
});
</script>
</html>
</apex:page>
Can someone help me with same.??
I have tried using same different versions of angular and also tried copying angular version from the actual site example but still facing same error
Thanks,
Ray
The beforeDrop function should return a promise (documentation).
The plugin executes your beforeDrop, where you would typically ask the user for confirmation, and then it "drops" (or not).
As you are not waiting for user input, to get rid of the error you could inject $q and return the dummiest promise, so to speak:
$scope.beforeDrop = function () {
console.log('Before dropping..!!');
return $q.when();
}
But the final look of beforeDrop will be more like:
$scope.beforeDrop = function () {
// open modal
// ...
return modalPromise;
}

AngularJS: Add a loader element to top of DOM

Been trying to find out how to do this the best way but haven't found any answers, don't know if I suck at searching or no-one has asked the question. Probably the first one, but anyway.
I'm wondering what the best way is to add an element to the top of the DOM (so that it is on top of everything else) in AngularJS?
My solution to this problem now is to show a modal with the loading spinner in it but I think this is an ugly solution as it shouldn't be that hard to add my own div-element to the DOM that are showing the spinner.
This is the code I have in my modal right now:
<div class="modal-body" style="text-align: center;">
<i class="fa fa-spinner fa-spin fa-5x"></i>
</div>
So you can understand why I think it's unnecessary and ugly to have it in a modal. I've been reading about directives but not really sure how it would look like and how I would show it where I want it to be shown.
I just created something just like this for a project of mine. You can make a div and set the size to 100% of the screen. Set some variable on it so that it shows only when the data is loading.
I used the following CSS for mine:
#overlay {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
z-index:10000;
text-align: center;
vertical-align: middle;
}
Its important to make a large z-index so that it shows on top of everything, and I used a semi-transparent overlay. You can style however you'd like.
And html like the following:
<div id="overlay" data-loading>
<i class="icon-spinner icon-do-spin" ></i>
</div>
FYI - 'icon-do-spin' is a cool class provided by FontAwesome to animate the spinner icon that you are using, and 'data-loading' is a directive I used to check for when all http pending requests are completed. You could just use something like ng-show/ng-hide/ng-if to show or hide the loading div.
In Angular, in order to work with DOM, you need a directive. And to control loader, you need a service. Here is a very simple demo for you. The principle is: directive watches for state change in service and draws "loader" if service says that loader shoud be presented:
index.html
<!DOCTYPE html>
<html data-ng-app="Demo">
<head>
<script data-require="angular.js#1.2.22" data-semver="1.2.22" src="https://code.angularjs.org/1.2.22/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body data-ng-controller="LoaderController as ctrl">
<div data-loader class="loader" data-ng-class="{'visible':Loader.visible}"></div>
<button data-ng-click="ctrl.show(true)">Loader</button>
</body>
</html>
script.js
(function() {
'use strict';
angular.module('Demo', []);
angular.module('Demo').directive('loader', [function(){
return {
'restrict' : 'A',
'controller' : ['$scope', 'Loader', function($scope, Loader){
$scope.Loader = Loader;
}]
}
}]);
angular.module('Demo').factory('Loader', [function(){
var instance = {}
instance.show = function(on){
instance.visible = on;
}
return instance;
}]);
angular.module('Demo').controller('LoaderController', ['$timeout', 'Loader', function($timeout, Loader){
this.show = function(){
Loader.show(true);
$timeout(function(){
Loader.show(false);
}, 5000)
}
}]);
})();
style.css
html, body {
margin: 0;
padding: 0;
}
.loader {
opacity: .5;
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(255, 0, 0, 0.5);
display: none;
}
.loader.visible {
display: block;
}

Categories

Resources