Here's the Plunk Code can Verify Now also
http://next.plnkr.co/edit/vrI2haNy1zYPDcCWh7gj?p=preview&utm_source=legacy&utm_medium=worker&utm_campaign=next&preview
Java Script Code: it is containing dummy json there root node is Admin System and there sub menu are Like Angular, Linux, Server
Here UI will be shown as Given Below Format and this Menu will be able to Expendable and Close able or collapse so this will be fetch the data as from Service and same way can be use in project
angular.module('myapp', ['ui.bootstrap'])
.controller("MainController", ["$scope",
function($scope){
$scope.bodyText = "Test Menu";
$scope.showSubmenu = function(item) {
if($scope.activeParentIndex === item){
$scope.activeParentIndex = "";
}else{
$scope.activeParentIndex = item;
}
}
$scope.isShowing = function(index) {
if($scope.activeParentIndex === index){
return true;
} else{
return false;
}
};
$scope.modulos =
[{"module":"Admin System ",
"adm_modulo_id":1,
"submodule":[{"res":"Angular","url":"#/admin/1"},
{"res":"Linux","url":"#/admin/2"},
{"res":"Server","url":"#/admin/3"}
]
}];
}]);
Html Code: it will show dummy json code as menu and sub-menu
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css#3.x" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.9/angular.js" data-semver="1.2.9"></script>
<script data-require="ui-bootstrap#*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1>Test</h1>
<div ng-controller="MainController">
{{bodyText}}
<ul class="sidebar-menu" ng-repeat="m in modulos">
<li class="treeview" ng-repeat="(itemIndex, item) in modulos">
<a ng-click="showSubmenu(itemIndex)">
<i class="fa fa-table"></i> <span>{{item.module}}</span>
</a>
<ul class="sub-nav" ng-show="isShowing(itemIndex)">
<li ng-repeat="sub_element in m.submodule">
{{sub_element.res}}
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Related
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>
I am new to Angularjs and quite not sure where to start from,i need to display data(coming from a json) under each date in datepicker.
I have my datepicker calendar ready.
<!doctype html>
<html ng-app="720kb">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="http://720kb.github.io/csshelper/assets/ext/src/helper.css">
<link rel="stylesheet" type="text/css" href="src/css/angular-datepicker.css">
<title>Angularjs Datepicker</title>
</head>
<body>
<div class="separator50"></div>
<div class="col6 offset-left2">
<div class="col3">
<div class="datepicker"
date-format="MMMM d, y"
button-prev='<i class="fa fa-arrow-circle-left"></i>'
button-next='<i class="fa fa-arrow-circle-right"></i>'>
<input ng-model="date2" type="text" class="angular-datepicker-input"/>
</div>
Date 2 is: {{date2}}
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-route.min.js"></script>
<script type="text/javascript" src="src/js/angular-datepicker.js"></script>
<script type="text/javascript" src="assets/js/index.js"></script>
</body>
</html>
This is an example of getting JSON Data in Angular Js , can u give us some more information about what the structure of the Json ?
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</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>
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
looping through getJSON results to display json object in <li> - only returns last element - json object has full results? looping through data[i] should give me all?
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no">
<link href="http://jqmdesigner.appspot.com/gk/lib/jquery.mobile/1.4.2/flatui/jquery.mobile.flatui.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<title>get the html from a website</title>
<script>
$( document ).ready(function() {
$.getJSON("tt_json.php", function(data){
for (var i = 0; i < data.length; i++) {
$.each(data[i], function(key, val) {
//alert(key + ":" + val);
$('#myUL').html("<li>" + key + " : " + val + "</li>");
});
}
});
</script>
</head>
<body>
<!-- Page: home -->
<div id="home" data-role="page">
<div data-role="header" data-position="fixed" data-theme="b">
<h3>GET WEB DATA</h3>
</div>
<div role="main1" id="mainone" class="ui-content">
<ul data-role='listview' id='myUL' data-inset='true' class='ui-listview ui-listview-inset ui-corner-all ui-shadow'>
</ul>
</div>
<div role="main" id="mainzero" class="ui-content">
</div>
</div>
</body>
you seem to set the html tag with id myUL in the loop of your javascript function. this overwrites the inner html of that tag each time. Try to add the li element instead of overwriting.
I am not able to get contacts list.
HTML Code:
<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<style type="text/css">
/* Prevent copy paste for all elements except text fields */
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
input, textarea { -webkit-user-select:text; }
body { background-color:green; color:black }
</style>
<script src='intelxdk.js'></script>
<script type="text/javascript">
/* This code is used to run as soon as Intel activates */
var onDeviceReady=function(){
//hide splash screen
intel.xdk.device.hideSplashScreen();
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
</script>
</head>
<body>
<script>
document.addEventListener('intel.xdk.contacts.get', contactsReceived, true);
function contactsReceived() {
alert("contacts recieved");
var table = document.getElementById("contacts");
table.innerHTML = '';
var myContacts = intel.xdk.contacts.getContactList();
alert("Contacts length: "+myContacts.length);
}
</script>
</body>
</html>
intel.xdk.contacts.get event is not fired. Is it a bug ?
I was not calling intel.xdk.contacts.getContacts() inside onDeviceReady. Found this from the post here.
Hi i am getting same problem. But I am able to get contacts in Phone after deploying (Sony xperia ion).
This is my code.
I set the permission for contacts.
<!DOCTYPE html>
<html><!--HTML5 doctype-->
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Pragma" content="no-cache">
<script src="intelxdk.js"></script>
<!-- phantom library, needed for XDK api calls -->
<script src="cordova.js"></script>
<!-- phantom library, needed for Cordova api calls -->
<script src="xhr.js"></script>
<!-- phantom library, needed for XDK CORS -->
<script type="text/javascript" language="javascript">
var onDeviceReady = function () { // called when Cordova is ready
if (window.Cordova && navigator.splashscreen) { // Cordova API detected
navigator.splashscreen.hide(); // hide splash screen
}
setTimeout(function () {
$.ui.launch();
}, 50);
intel.xdk.contacts.getContacts();
};
document.addEventListener("deviceready", onDeviceReady, false);
</script>
<script src="js/appframework.ui.min.js"></script>
<script>
if (isIntel)
$.ui.autoLaunch = false;
$.ui.useOSThemes = true; //Change this to false to force a device theme
$.ui.blockPageScroll();
$(document).ready(function () {
if ($.ui.useOSThemes && (!$.os.ios || $.os.ios7))
$("#afui").removeClass("ios");
});
document.addEventListener('intel.xdk.contacts.get', contactsReceived, false);
function contactsReceived() {
var table = document.getElementById("contacts");
table.innerHTML = '';
var myContacts = intel.xdk.contacts.getContactList();
if(myContacts.length==0)
{
alert("No contact found");
}
for(var i=0;i<myContacts.length;i++) {
//add row to table
var contactInfo = intel.xdk.contacts.getContactData(myContacts[i]);
var tr = document.createElement("tr");
tr.setAttribute('id', 'pnid'+contactInfo.id);
tr.setAttribute('onClick', 'document.getElementById("iden").value = '+contactInfo.id+';');
tr.setAttribute('style', 'background-color:#B8BFD8');
var id = document.createElement("td");
id.innerHTML = contactInfo.id;
tr.appendChild(id);
var msg = document.createElement("td");
msg.innerHTML = contactInfo.name;
tr.appendChild(msg);
table.appendChild(tr);
}
}
</script>
<link href="css/icons.css" rel="stylesheet" type="text/css">
<link href="css/af.ui.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="afui" class="ios">
<div id="header" class="header"></div>
<div id="content" style="">
<div class="panel" title="Main" data-nav="nav_0" id="main" selected="selected"
style="">
<a class="button" href="#" style="" data-appbuilder-object="button" onclick="contactsReceived();">Hello World</a>
<table id="contacts">
</table>
</div>
</div>
<div id="navbar" class="footer">
Home
</div>
<header id="header_0" data-appbuilder-object="header">
<a id="backButton" href="#" class="button backButton" style="visibility: visible; ">Back</a>
<h1 id="pageTitle" class="">test</h1>
</header>
<nav id="nav_0" data-appbuilder-object="nav">
<h1>Side Menu</h1>
</nav>
</div>
</body>
</html>