I was trying this in my view
but it come like this:
I just want 10 file and make new line to put another 10 file
heres my view
md-content.md-whiteframe-1dp
.glyph layout="row"
div layout="column" layout-align="center center" ng-repeat="doc in ctrl.documents" style="text-align: center;"
div
md-icon.material-icons.md-48 insert_drive_file
span.step style="padding-left:48;"
| test
Using ng-repeat-start and ng-repeat-end you can achieve, This is how it works in angular
angular.module('notesApp', [])
.controller('MainCtrl', ['$scope', function ($scope) {
$scope.docs = [1, 2, 3,4, 5,6,7,8,9,10,11,12,13,14,15, 16,17,18,19,20];
}]);
<html lang = "en">
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app = "notesApp" ng-cloak>
<div ng-controller="MainCtrl">
<div style="display: inline" ng-repeat-start="doc in docs"><i class="glyphicon glyphicon-file"></i>{{doc}}</div>
<div ng-repeat-end ng-if="($index + 1) % 10 == 0"></div>
</div>
</body>
</html>
Related
I am creating an app in AngularJS, where I am grabbing the data from the backend to display on the view. But, for some reason, I am getting the data in my console but not in my view. I will be so thankful if any one can help me solve this. Thanks in advance.
Here is my code. -Services
app.factory('user', ['$http', function($http) {
var userInfo = {
getUserInfo: function () {
return $http.get('https://************/*****/**/***********')
}
};
return userInfo;
}]);
home page(view)
<div class="users" ng-repeat="user in users | filter:userSearch" >
<a href="#/users/{{ user.id }}">
<img ng-src="{{user.img}}"/>
<span class="name">{{user.first}} </span>
<span class="name">{{user.last}} </span>
<p class="title">{{user.title}} </p>
<span class="date">{{user.date}} </span>
</a>
HomeController
var isConfirmed = false;
app.controller('HomeController', function($scope, user, $http) {
if (!isConfirmed) {
user.getUserInfo().then(function (response) {
$scope.userInfo = response.data;
isConfirmed = $scope.userInfo;
console.log($scope.userInfo);
}, function (error) {
console.log(error)
});
}
});
App.js
var app = angular.module("Portal", ['ngRoute']);
app.controller('MyCtrl', function($scope) {
$scope.inactive = true;
$scope.confirmedAction = function() {
isConfirmed.splice($scope.person.id, 1);
location.href = '#/users';
}
});
index.html
<!doctype html>
<html ng-app="Portal">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<div class="header">
<div class="container">
<h3>Portal</h3>
</div>
</div>
<div class="main">
<div class="container">
<div ng-view>
</div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/HomeController.js"></script>
<script src="js/controllers/UserController.js"></script>
<!-- Services -->
<script src="js/services/users.js"></script>
</body>
</html>
change your ng-repeat="user in users" to ng-repeat="user in userInfo"
as your assigning and consoling only $scope.userInfo in your controller
The property you assign data has to be same as of binded to view.
As per your HTML data should be in users. So do it like : $scope.users = response.data;.
or if you assign data to userInfo, then bind it on html. like :
<div class="users" ng-repeat="user in userInfo | filter:userSearch" >
I have the following array of objects, which is a server response. I am trying to use ng-repeat to iterate over this array and read each value.
While trying to use in html, array[0].value is working while using ng-repeat, nothing is working.
After a lot of debugging, I am unable to understand how ng-repeat is working for arrays.
Here is my example:
messages array:
[
{"Id":14,"Text":"hii hello","count":750},
{"Id":10009,"Text":"test message","count":6}
]
The following is used in html:
<div class="my-message" layout="row" layout-align="center center">
{{messages}} <!-- printing the above array -->
<div ng-repat="message in messages">
{{ message.Id}}<!-- printing nothing -->
</div>
{{ messages[0].Id }} <!-- printing 14 !-->
</div>
The array is in scope and it is also seen in this html as the {{ message }} array is printing properly.
Can someone help me understand the working of ng-repeat and where am I missing
In your controller you must have :
$scope.messages = [{"Id":1,...},...]
There is a typo in your view code (ng-repat -> ng-repeat):
<div ng-repat="message in messages">
{{ message.Id}}
</div>
must be :
<div ng-repeat="message in messages">
{{ message.Id}}
</div>
It should be fine like this.
Have fun
hope this will clears you
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="my-message" layout="row" layout-align="center center">
{{messages}} <!-- printing the above array -->
<div ng-repeat="message in messages">
{{ message.Id}}
{{ message.Text }}
{{ message.count }}
</div>
</div>
</body>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.messages =[
{"Id":14,"Text":"hii hello","count":750},
{"Id":10009,"Text":"test message","count":6}
];
});
</script>
</html>
The issue is with typo in using "ng-repeat", after correcting it my code worked normally as expected.
I have a directive for Opentoke Library but it's not working when I am using the ng-if, the reason of using ng-if is for IOS devices webrtc is not supported so it's showing alert after DOM load.
<div class="opentok" ng-if="!isMobileView">
<open-tok-archive></open-tok-archive>
</div>
click me
<div class="opentok" ng-if="!isMobileView">
<open-toke-screen-share></open-toke-screen-share>
</div>
without ng-if every thing is working fine.
Direcitve
'use strict';
var session, apiKey, publisher, openTokToken, archiveID;
angular.module('app')
.directive('openTokArchiv', [function () {
return {
restrict: 'EA',
templateUrl: 'views/pages/openTokArchive.html',
controller: function (OpenTokService, OTSession, $window, $rootScope, $scope, $routeParams, $cookieStore) {
$scope.myMethod = function (){
console.log("---------not-- working ---------")
}
};
}]);
Use ng-show/ng-hide instead of ng-if.
EDITS
<div class="opentok" ng-if="!isMobileView">
<open-tok-archive></open-tok-archive>
</div>
Have a look at this plunker Demo link
Try this without ng-if #working
<!DOCTYPE html>
<html>
<head>
<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="myCtrl" ng-init="variables">
<div class="opentok">
<open-tok-archive></open-tok-archive>
</div>
<button type="button" ng-click="myMethod()">Toggle</button>
</body>
</html>
With ng-if it is not working
<body ng-app="app" ng-controller="myCtrl" ng-init="variables">
<div class="opentok" ng-if="!isMobileView">
<open-tok-archive></open-tok-archive>
</div>
<button type="button" ng-click="myMethod()">Toggle</button>
</body>
how to pass scope variable as 'FormName' of ng-click parameter to get FormName.$valid and FormName.$dirty in view angularjs.
Example:
var myApp = angular.module('myApp', []);
myApp.controller('Main', ['$scope',function($scope){
$scope.FormName = 'FormNameValidation';
$scope.showFormValidation = function(statusValid, statusDirty)
{
$scope.FormNameValidationStatus = statusValid;
$scope.FormNameDirtyStatus = statusDirty;
}
}]);
<form name="FormName" novalidate>
<div ng-app='myApp' ng-controller="Main">
<button type="button" ng-click="showFormValidation(FormName.$valid, FormName.$dirty)">Click</button>
{{FormNameValidationStatus}}
{{FormNameDirtyStatus}}
</div>
</form>
Output: undefined undefined
The problem is that the form element is not enclosed within the element that defines ngApp directive. If you rearrange the elements so that the form is a descendant of the div with the ng-app attribute you should get what you want
var myApp = angular.module('myApp', []);
myApp.controller('Main', ['$scope',
function($scope) {
$scope.FormName = 'FormNameValidation';
$scope.showFormValidation = function(statusValid, statusDirty) {
$scope.FormNameValidationStatus = statusValid;
$scope.FormNameDirtyStatus = statusDirty;
}
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Form State</h1>
<div ng-app="myApp" ng-controller="Main">
<form name="FormName" novalidate="">
<button type="button" ng-click="showFormValidation(FormName.$valid, FormName.$dirty)">Click</button>
{{FormNameValidationStatus}} {{FormNameDirtyStatus}}
</form>
</div>
</body>
</html>
I'm fairly new to using AngularJS and I'm working with Angular Materials, and I've come across an issue that I cannot understand.
When writing a md-list, it renders fine in Firefox, and IE (11), but in chrome, each md-list-item takes the full height of the window, but only when I'm running the code for my site.
If I view other pages (eg. the Angular Material demos), or put the code into a shareable editor, like codepen, or jsfiddle, they render fine.
The code below is is a test template which displays incorrectly
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-cloak>
<div style="height:400px;width:500px;">
<md-list>
<md-list-item ng-click="null">Item 1</md-list-item>
</md-list>
<md-list>
<md-list-item ng-click="null">Item 2</md-list-item>
</md-list>
<md-list>
<md-list-item ng-click="null">Item 3</md-list-item>
</md-list>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<script type="text/javascript">
angular.module('BlankApp', ['ngMaterial']);
</script>
</body>
</html>
CodePen : http://codepen.io/anon/pen/pyqKZr
Live Demo of the failed layout: http://angular.deathwishgame.co.uk/
Why does this only happen when rendering my own page alone, what am I doing wrong?
You are running into https://github.com/angular/material/issues/8094
The only workaround is to give the list items a height/max-height.
There seems to be a pull-request pending review.
Use angular-material version 1.0.9 instead of 1.1.0. Then, it will work fine.
Try running this code , I have corrected your code which you have hosted
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.9/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-cloak>
<!--
Your HTML content here
-->
<div style="height:400px;width:500px;">
<md-list>
<md-list-item ng-click="null">Item 1</md-list-item>
<md-list-item ng-click="null">Item 2</md-list-item>
<md-list-item ng-click="null">Item 3</md-list-item>
</md-list>
</div>
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.9/angular-material.min.js"></script>
<!-- Your application bootstrap -->
<script type="text/javascript">
/**
* You must include the dependency on 'ngMaterial'
*/
angular.module('BlankApp', ['ngMaterial']);
</script>
</body>
</html>
You can try to put all the md-list-item in just one md-list.
<div style="height:400px;width:500px;">
<md-list>
<md-list-item ng-click="null">Item 1</md-list-item>
<md-list-item ng-click="null">Item 2</md-list-item>
<md-list-item ng-click="null">Item 3</md-list-item>
</md-list>
</div>
<html lang="en" >
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script language="javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('listController', listController);
function listController ($scope) {
var self = this;
self.allContacts = loadContacts();
self.contacts = [self.allContacts[0]];
function loadContacts() {
var contacts = [
'Roberto Karlos',
'Bob Crestor',
'Nigel Rick',
'Narayana Garner'
];
return contacts.map(function (c, index) {
var cParts = c.split(' ');
var contact = {
name: c,
email: cParts[0][0].toLowerCase() + '.' + cParts[1].toLowerCase() + '#example.com',
image: 'http://lorempixel.com/50/50/people?' + index
};
contact._lowername = contact.name.toLowerCase();
return contact;
});
}
}
</script>
</head>
<body ng-app="firstApplication">
<div id="listContainer" ng-controller="listController as ctrl" layout="column" ng-cloak>
<md-content>
<md-list>
<md-subheader class="md-no-sticky">Contacts</md-subheader>
<md-list-item class="md-2-line contact-item" ng-repeat="(index, contact) in ctrl.allContacts"
ng-if="ctrl.contacts.indexOf(contact) < 0">
<img ng-src="{{contact.image}}" class="md-avatar" alt="{{contact.name}}" />
<div class="md-list-item-text compact">
<h3>{{contact.name}}</h3>
<p>{{contact.email}}</p>
</div>
<md-divider ng-if="!$last"></md-divider>
</md-list-item>
</md-list>
<md-list>
<md-subheader class="md-no-sticky">Contacts (With Insets)</md-subheader>
<md-list-item class="md-2-line contact-item" ng-repeat="(index, contact) in ctrl.allContacts"
ng-if="ctrl.contacts.indexOf(contact) < 0">
<img ng-src="{{contact.image}}" class="md-avatar" alt="{{contact.name}}" />
<div class="md-list-item-text compact">
<h3>{{contact.name}}</h3>
<p>{{contact.email}}</p>
</div>
<md-divider md-inset ng-if="!$last"></md-divider>
</md-list-item>
</md-list>
</md-content>
</div>
</body>
</html>