I am using ng-repeat in angularJS to create elements. I want to apply id to the element which is repeated, in this case li
HTML Code:
<li id="{{item}}" ng-repeat="item in itmes"></li>
All the syntax and declaration is perfect in my code. However, the above code does not work. I want below output to be generated. If items = ['one', 'two', 'three']
<li id="one" ng-repeat="item in items">...</li>
<li id="two" ng-repeat="item in items">...</li>
<li id="three" ng-repeat="item in items">...</li>
Is it possible using angularJS?
Try this
<li ng-attr-id="{{item}}" ng-repeat="item in itmes"></li>
EDIT
Here is the
HTML
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div ng-controller="testCtrl">
<ul>
<li ng-attr-id="{{item}}" ng-repeat="item in items">{{ item }}</li>
</ul>
</div>
</body>
</html>
JS
// Code goes here
(function () {
'use strict';
var app = angular.module('app', []);
app.controller('testCtrl', ['$scope',
function ($scope) {
$scope.items = ['one', 'two', 'three'];
}
]);
})();
and output
and plunker
http://plnkr.co/edit/M6BDcJ2csgBR4C9TNdbz?p=preview
you have typo in items.
<li id="{{item}}" ng-repeat="item in itmes"></li>
item in `itmes`
change this to items and try.
DEMO
Related
Below is a HTML page, Couldn't get content when click on page 1
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
<script src="JavaScript.js"></script>
</head>
<body ng-app="myapp">
<div class="Container">
<nav class="navbar navbar-default">
<ul class="navbar navbar-nav">
<li>
Page 1
Page 2
Page 3
</li>
</ul>
</nav>
</div>
<div ng-view></div>
<script>
var app = angular.module("myapp", ["ngRoute"]);
app.config(function ($routeProvider){
$routeProvider.when("/page1", {
template : <h1>Page 1</h1>
})
.when("/page2", {
template: <h1>Page 2</h1>
})
.otherwise({
template: <h1>note found</h1>
})
});
</script>
</body>
</html>
Is there any mistake in above code. Is issue with reference.
Can someone please correct it?
Page 3 will not show anything.
The first mistake you missed around quotes for templates in javascript code:
$routeProvider.when('/page1', {
template : '<h1>Page 1</h1>'
})
.when("/page2", {
template: '<h1>Page 2</h1>'
})
.otherwise({
template: '<h1>note found</h1>'
});
And no need to use a exclamation mark in links:
Page 1
Page 2
Page 3
You can use redirectTo() method with otherwise() method. Also, have to put href="#" under <a> tag.
<!DOCTYPE html>
<html>
<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-route.js"></script>
<body ng-app="myApp">
<p>Main</p>
Red
Green
Oranger
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.otherwise({redirectTo:'/'});
});
</script>
<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p>
</body>
</html>
There are a couple of mistakes: First, in the href, you have used capital P whereas in route definition it's small letter i.e p, 2nd you do not need to use ! in the href i.e it should be like href=#page1 and the 3rd one is template should be as string i.e under single/double quote.
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
<script src="JavaScript.js"></script>
</head>
<body ng-app="myapp">
<div class="Container">
<nav class="navbar navbar-default">
<ul class="navbar navbar-nav">
<li>
Page 1
Page 2
Page 3
</li>
</ul>
</nav>
</div>
<div ng-view></div>
<script>
var app = angular.module("myapp", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider.when("/page1", {
template: '<h1>Page 1</h1>'
})
.when("/page2", {
template: '<h1>Page 2</h1>'
})
.otherwise({
template: '<h1> note found </h1>'
})
});
</script>
</body>
</html>
If you can give any suggestions for both HTML and JS.
The HTML code for my application is given below:
<ul>
<li ng-repeat=" opt in bcfList track by $index" ><input type="checkbox" ng-model="bcfList[opt]" />
{{ opt }}
</li></ul>
The Controller.js for my application is given below:
$scope.bcfList=data.BCFNUMBER;
$scope.getbcfnumber = function(index) {
$scope.bcflist=data.BCFNUMBER;
console.log($scope.selected);
}
The BCFNUMBER is the key value of the list that am getting from backend controller.java using map functions.
If you can add include the sample value of for $scope.bcfList Will be able to help better.
Updated code with the json values sent for $scope.bcfList
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script data-require="angular.js#1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script>
(function() {
angular.module("myapp", []).controller('MainCtrl', ['$scope', function($scope) {
$scope.bcfList= ["BCF-0025", "BCF-0049", "BCF-0051", "BCF-0091", "BCF-0096", "BCF-0100", "BCF-0115", "BCF-0117", "BCF-0118", "BCF-0130"];
$scope.checkedbcfList = [];
$scope.checkedBcf = function(item) {
if($scope.bcfList[item]){
$scope.checkedbcfList.push(item);
}
else{
var index = $scope.checkedbcfList.indexOf(item);
if (index !== -1) {
$scope.checkedbcfList.splice(index, 1);
}
}
}
/*$scope.getbcfnumber = function() {
$scope.checkedbcfList = [];
angular.forEach($scope.bcfList, function (item, index) {
if($scope.bcfList[item]){
$scope.checkedbcfList.push(item);
}
});
}*/
}]);
}());
</script>
<style></style>
</head>
<body ng-app="myapp" ng-controller="MainCtrl">
<ul>
<li ng-repeat=" opt in bcfList track by $index">
<input type="checkbox" ng-model="bcfList[opt]" ng-change="checkedBcf(opt)"/> {{ opt }}
</li>
</ul>
<!--<input type="button" value="Get checked bcf" ng-click="getbcfnumber()"/> -->
<div>checked BCF list: {{checkedbcfList}}</div>
</body>
</html>
<html ng-app>
<head>
</head>
<body data-ng-controller="Myfunc">
<ol type="i">
<li data-ng-repeat="c in cust | filter:name"> {{ c.name | lowercase}} - {{c.city | lowercase}}</li>
</ol>
<script src="angular.js"></script>
<script>
function Myfunc($scope)
{
$scope.cust=[
{name:'grimer',city:'ambernath'},
{name:'primer',city:'goregaon'}
];
}
</script>
</body>
</html>
custom controller not working in angularjs
don't know whether the custom script is working or not or something else
I have updated your code and it is now working:
<html>
<head></head>
<body>
<div ng-app>
<div data-ng-controller="Myfunc">
<ol type="i">
<li data-ng-repeat="c in cust | filter:name"> {{ c.name | lowercase}} - {{c.city | lowercase}}</li>
</ol>
<script src="angular.js"></script>
<script>
function Myfunc($scope) {
$scope.cust = [{
name: 'grimer',
city: 'ambernath'
}, {
name: 'primer',
city: 'goregaon'
}];
}
</script>
</div>
</div>
</body>
</html>
What I did is to move ng-app to a div and the data-ng-controller="Myfunc" to a div inside it.
You can find the working version at this js_fiddle url.
HTML:
<!-- Order -->
<li ui-sref-active="active">
<a ui-sref="order" class="main_link">
<i class="fa fa-shopping-cart"></i>Order
</a>
<a ui-sref="order/create"><span class="plus">+</span></a>
<div class="clearfix"></div>
</li>
I want to add class="active" on <li>.
Whenever click on <a ui-sref="order/create"><span class="plus">+</span></a> this, that time class="active" add on <li>.
BUT
click on
<a ui-sref="order" class="main_link"><i class="fa fa-shopping-cart"></i>Order</a> that time class="active" not add on <li>.
Your help would be appreciated.
The way the ui-router is currently implemented it is not possible to do that. You can't specify for which particular ui-sref the ui-sref-active will be activated. That being said, it should be easier to adjust your template to wrap those links in such a way that you can have one ui-sref-active per one ui-sref. At least easier than adjusting ui-router behaviour.
app.js
var app = angular.module('plunker', ['ui.router']);
app.config([ '$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/home/flow");
$stateProvider.state("home", {
url : '/home',
templateUrl : 'home.html',
}).state("contact", {
url : '/contact',
template : 'contact',
});
}]);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
index.html
<!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.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<li class="top" ui-sref-active="heaader_active">
<a ui-sref="home"><i class="fa fa-cloud-upload"></i> Home</a>
<a ui-sref="contact"><i class="fa fa-cloud-upload"></i> contact</a>
</li>
<ui-view/>
</body>
</html>
style.css
/* Put your css in here */
.heaader_active {
background: red;
}
More Detail Check Here
I am trying to pull in data from a JSON file and use it to populate a navigation menu, composed of divs that collapse using the Angular UI collapsible function.
Here is my code (also on Plunker here):
<!DOCTYPE html>
<html ng-app="samApp">
<head>
<link data-require="bootstrap-css#3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
<script data-require="angular-ui-bootstrap#*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body>
<div CollapseCtrl navdata ng-repeat="items in item">
<div class="nav-super">{{items.img}}</div>
<div collapse="isCollapsed">
<div class="nav-sub">{{items.img}}</div>
</div>
</div>
</body>
</html>
My issues are:
I cannot make the elements within the collapsible take the json information. If I set ng-repeat on one of the divs, the sub or super div will not take it. Setting ng-repeat on the outermost div results in none of the sub divs taking the repeat.
I have enclosed my controllers in directives and assigned both directives, for the collapsing function and the HTTP GET, to the same div.
I do believe you're looking for something like this:
<!DOCTYPE html>
<html ng-app="samApp">
<head>
<link data-require="bootstrap-css#3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
<script data-require="angular-ui-bootstrap#*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body ng-controller="navDataController">
<ul>
<li ng-repeat="item in items">
<span ng-click="action(item)">{{item.img}}</span>
<ul ng-show="item.isCollapsed">
<li ng-repeat="sub in item.subcontent">
<span>{{sub.title}} {{sub.}}</span>
</li>
</ul>
</li>
</ul>
</body>
</html>
http://plnkr.co/edit/DlVqJOzQwjxdCVjStvZg?p=preview
The example works, but it's a bit crude; learn basics to make it sweet.
Also modified your plunkr to work:
http://plnkr.co/edit/jxVGxl7h8gBlFLQ9zyTW?p=preview
HTML
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css#3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
<script data-require="angular-ui-bootstrap#*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body ng-app="samApp" ng-controller="CollapseCtrl">
<div ng-repeat="item in items">
<div class="nav-super" ng-click="item.isCollapsed=!item.isCollapsed">{{item.img}}</div>
<div collapse="item.isCollapsed">
<div class="nav-sub" ng-repeat="subElement in item.subcontent">{{subElement.title}}</div>
</div>
</div>
</body>
</html>
JS
var app = angular.module('samApp', ['ui.bootstrap']);
app.service('navdata', function($http) {
var myServiceObj = {
myData: {},
getData: function() {
$http.get('data.json').success(function(data, status, headers, config) {
angular.copy(data, myServiceObj.myData);
});
}
}
myServiceObj.getData();
return myServiceObj;
});
app.controller('CollapseCtrl', function($scope, navdata) {
$scope.items = navdata.myData;
});
Basically directives are meant for adding encapsulated behavior or DOM element manipulation. I think a service makes more sense for taking care of the requests to the server and storing the data to be used by various controllers.
I also used the data to store the isCollapsed boolean so you may want to loop over the data and set that to false if you want them closed initially or otherwise just reverse your boolean logic in the collapse expression.
You had all the right logic just in the wrong places, also read up on the ng-repeat documentation it's a piece I visit often.