i have to populate the data into the table using ng-repeat in the td section if the value is number the text should be aligned to right if it is text or alpha numeric it should be at the left of td.
Below is the example which matches your requirement.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div
ng-app="myApp"
ng-controller="myCtrl">
<table style="border:1px solid black">
<tr ng-repeat="x in sectionUndecoratedList" style="border:1px solid black">
<td ng-class="x.isNumber ? 'center':'left'">{{ x.activites }}</td>
</tr>
<script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script>
</table>
</div>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
.center {
text-align: center
}
.left {
text-align: left
}
</style>
</body>
</html>
Controller
(function(){
angular
.module('myApp',[])
.controller('myCtrl', Controller);
Controller.$inject = ['$rootScope', '$scope'];
function Controller($rootScope, $scope){
activate();
/**
* #method activate
* #description function to be called when controller is activate
*/
function activate(){
$scope.sectionHeader = 'Activities';
$scope.sectionUndecoratedList = [
{'activites':'demo'},
{'activites':'3'},
{'activites':'test'},
{'activites':'1'}
]
var reg = new RegExp('^[0-9]$');
for (var i = 0; i < $scope.sectionUndecoratedList.length; i++) {
var a = $scope.sectionUndecoratedList[i];
if(reg.test(a.activites)){
a.isNumber = true;
}
}
}
}
})();
Sharing the working demo for your reference http://jsbin.com/robovoperu/edit?html,js,console,output
Related
I am trying to obtain horizontal scroll using buttons.
I have a container which has several elements(which can be more than 3 , getting values from backend) stacked horizontally and I want to scroll through them using the buttons. Also i want to hide those buttons when there is no scrollbar.
This is very easy and usefull:
angular.module('anchorScrollOffsetExample', [])
.run(['$anchorScroll', function($anchorScroll) {
$anchorScroll.yOffset = 50; // always scroll by 50 extra pixels
}])
.controller('headerCtrl', ['$anchorScroll', '$location', '$scope',
function($anchorScroll, $location, $scope) {
$scope.gotoAnchor = function(x) {
var newHash = 'anchor' + x;
if ($location.hash() !== newHash) {
// set the $location.hash to `newHash` and
// $anchorScroll will automatically scroll to it
$location.hash('anchor' + x);
} else {
// call $anchorScroll() explicitly,
// since $location.hash hasn't changed
$anchorScroll();
}
};
}
]);
body {
padding-top: 50px;
}
.anchor {
border: 2px dashed DarkOrchid;
padding: 10px 10px 200px 10px;
}
.fixed-header {
background-color: rgba(0, 0, 0, 0.2);
height: 50px;
position: fixed;
top: 0; left: 0; right: 0;
}
.fixed-header > a {
display: inline-block;
margin: 5px 15px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-anchor-scroll-offset-production</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="anchorScrollOffsetExample">
<div class="fixed-header" ng-controller="headerCtrl">
<a href="" ng-click="gotoAnchor(x)" ng-repeat="x in [1,2,3,4,5]">
Go to anchor {{x}}
</a>
</div>
<div id="anchor{{x}}" class="anchor" ng-repeat="x in [1,2,3,4,5]">
Anchor {{x}} of 5
</div>
</body>
</html>
i am trying to implement searching concept using filter Filter, I'm getting this error and I'm unable to sort this error even I've gone through so many articles and solutions, none suites best for this ... please help !!!!
here is the code.....>
<!doctype html>
<html>
<head>
<style>
#span1{
border:2px dashed blue;
background-color:lime;
padding:0px;
margin-left:5px;
}
hr{
padding:0px;
margin:0px;
background-color:red;
height:5px;
}
h1{
border:2px solid lime;
background-color:orange;;
color:yellow;
padding:0px;
margin:0px;
position:relative;
width:100%;
float:left;
}
h1:first-line
{
color:green
}
</style>
</head>
<body ng-app="myApp" >
<h1><span id="span1">5-11-2016</span> ... Angular JS Filters implemented in Searching.</h1><br><br>
<hr>
<div ng-controller="myAppController">
Student Name : <input ng-model="searchobj.sname"/>
<br>
Select course : <select ng-model="searchobj.course">
<option>angular js</option>
<option>html</option>
<option>css</option>
<option>java script</option>
<option>jQuery</option>
<option>Bootstrap</option>
</select>
<br>
<br>
<br>
<table border="2">
<tr>
<th>Student Name</th>
<th>Course</th>
</tr>
<tr ng-repeat="item in students | filter : searchobj">
<td>{{item.sname}}</td>
<td>{{item.course}}</td>
</tr>
</table>
</div>
<script scr="angular.js"></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myAppController",
function($scope){
$scope.searchobj={sname:" ",course:" "};
$scope.students=[
{sname:"scott",course:"html"},
{sname:"rock",course:"css"},
{sname:"umar",course:"jQuery"},
{sname:"asad",course:"angular js"},
{sname:"nayeem",course:"html"},
{sname:"onida",course:"html"},
{sname:"shakes",course:"java script"},
{sname:"rony",course:"html"},
{sname:"rock",course:"Html"},
{sname:"asif",course:"css"},
{sname:"onida",course:"java script"},
{sname:"sammy",course:"Html"},
{sname:"huber",course:"angular js"},
{sname:"watson",course:"Html"},
{sname:"azzy",course:"Html"},
{sname:"katy",course:"bootstrap"},
{sname:"randy",course:"css"},
{sname:"sammy",course:"html"},
{sname:"jaab",course:"angular js"},
{sname:"randy",course:"html"},
{sname:"peter",course:"css"}];
});
</script>
</body>
</html>
Change <script scr="angular.js"></script> to <script src="angular.js"></script>
Change========^ -----------------------------------------------------^
<html>
<head>
<script src="angular.js"></script>
I'm trying to use Yandex Maps with this AngularJS module.
Here they have demonstrations, and here's my code:
index.html
<!DOCTYPE html>
<html lang="ru" xmlns:vml="urn:schemas-microsoft-com:vml" ng-app="myApp" ng-controller="myController">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1" />
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="style.css">
<script src="angular.min.js"></script>
<script src="ya-map-2.1.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<div id="map" class="w3-col s10 w3-dark w3-border">
<!--
<ya-map ya-zoom="8" ya-center="[37.64,55.76]" style="width:400px;height:500px;"></ya-map>
-->
</div>
</body>
</html>
script.js
console.log("script starts");
var myApp = angular
.module('myApp', ['yaMap'])
.controller("myController", function ($scope) {
console.log("In the controller");
var _map;
$scope.afterMapInit = function (map) {
_map = map;
};
$scope.del = function () {
_map.destroy();
};
console.log("After $scope ops");
$scope.initialize = function () {
var mapOptions = {
center: [50.5, 30.5],
zoom: 8
};
ymaps.ready(function () {
$scope.map = new ymaps.Map("map", mapOptions);
})
}
});
style.css
body {
background-color: #fff;
margin: 40px;
}
#body {
margin: 0 15px 0 15px;
}
#frmMain {
width: 100%;
height: 100%;
}
Please, if you know why I can't load the map and what's wrong with that code, (I suppose it's all wrong though), tell me about it!
I'm total novice in AngularJS and Yandex Maps, so, it may appear a silly question for you, but I cannot find anything useful on the Internet.
Promblem here in style for non-standard tag ya-map. By default browser set it display property to "inline", so without text element collapse to width:0, height:0.
Also, you not use any functions declared in controller.
You can see samples in Demo Page
var myApp = angular
.module('myApp', ['yaMap'])
.controller("myController", function($scope) {
var _map;
$scope.afterMapInit = function(map) {
_map = map;
};
$scope.del = function() {
_map.destroy();
};
});
ya-map {
display: block;
width: 400px;
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="//rawgit.com/tulov/angular-yandex-map/master/ya-map-2.1.min.js"></script>
<div id="map" class="w3-col s10 w3-dark w3-border" ng-app="myApp" ng-controller="myController">
<ya-map ya-zoom="8" ya-center="[37.64,55.76]" ya-after-init="afterMapInit($target)"></ya-map>
<button ng-click="del()">Удалить</button>
</div>
I am currently working on developing a grid component using HTML / AngularJS. The column data are rendered dynamically.
I am trying to format the data displayed based on the dataType. The data types could be like currency / date / number format. Conceptually, I am trying to achieve like the below one.
Is it possible?
<td ng-repeat="row in rows" title="{{row.toolTip}}">
{{row.displayData | row.dataType: row.format}}
</td>
Format your data with AngularJS filters
AngularJS provides some filters: currency, lowercase, uppercase (http://www.w3schools.com/angular/angular_filters.asp) or you can define your own filter
Example:
var app = angular.module('myApp', []);
app.controller("myCtrl", function($scope) {
$scope.data = [{
name: "Item1",
price: 50.3
}, {
name: "Item2",
price: 15.55
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<style>
table,
th,
td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="x in data">
<td>{{ x.name }}</td>
<td>{{ x.price | currency }}</td>
</tr>
</table>
</div>
Here I modified the W3schools example using a conditional in the ng-style definition to change the CSS style
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<style>
table,
th,
td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names" ng-style="{'background-color':(x.Country == 'UK')?'blue':'gray'}">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php")
.success(function(response) {
$scope.names = response.records;
});
});
</script>
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Matt's Template</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css" type="text/css" />
<link rel="stylesheet" href="../stylesheets/general.css" type="text/css" />
<style type="text/css">
.dragndrop {
position:relative;
margin:30px auto;
border:4px dashed #000;
border-radius: 25px;
padding:50px;
text-align: center;
}
table{
width:100%;
}
tr{
width:100%;
}
td, th {
padding:10px;
border:1px solid #000;
width:50%;
text-align: center;
}
</style>
</head>
<body>
<section class="container">
<!--<form action="/file-upload" method="post" enctype="multipart/form-data">
<input type="file" name="file" />
<input type="submit" />
</form>-->
<form action="/file-upload" class="dropzone dragndrop" id="my-awesome-dropzone"></form>
<section id="skills">
</section>
<script type="text/template" id="skillsTemplate">
<section>
<table>
<tr>
<th>Skill</th>
<th>Value</th>
</tr>
<% _.each(items, function(item){ %>
<tr>
<td><%= item.get('name') %></td>
<td><%= item.get('value') %></td>
</tr>
<% }); %>
<tr>
<td><button id="newSkill">New</button></td>
</tr>
</table>
</section>
</script>
</section>
<!-- Javascript Libraries -->
<script type="text/javascript" src="https://raw.github.com/enyo/dropzone/master/downloads/dropzone.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js" ></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone.js"></script>
<script type="text/javascript">
SkillsView = Backbone.View.extend({
render : function(){
var template = _.template($('#skillsTemplate').html(), [{ name:"Linux", value:"Test"}]);
this.$el.html(template);
}
});
var skillsview = new SkillsView({el : $('#skills') });
skillsview.render();
</script>
<!-- My Javscript -->
</body>
</html>
The only important part is the underscore template is not working. It is saying that the '_' on the line: _.each(items, function(item) is undefined. Why is this happening? I tried moving the underscore script include to the top of the page and that didn't help.
I was unable to reproduce the "_ is not defined" issue, but I did find another issue that you may be running into: You're referencing the items as the variable items, but you never told _.template you want the data to be in items. Use an object literal as the data:
_.template($('#skillsTemplate').html(), {
items: [{ name:"Linux", value:"Test" }]
})
(Also, you're using item.get('name') when the data is a plain object rather than an Underscore model, but I assume that was just a remnant from your original code after you simplified your code for the question.)