In this HTML:
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four
<ol>
<li>Us</li>
<li>They
<ol>
<li>Monkey</li>
<li>Cat</li>
<li>Elephant</li>
<li>Dos</li>
</ol>
</li>
<li>You</li>
<li>She</li>
</ol>
</li>
</ol>
how do I target those list-items that contain the nested list? In this particular example, how do I target the list-items with the words “Four” and “They”?
Since the html will change constantly, I am looking for an option that do not depend on classes or other method that require me to alter the html in order to stylize it.
It is possible to target theses list-items without touching the HTML? It seems to me that it might be hard/impossible since there is no a CSS parent selector. Any ideas?
It's not that hard you just have to add an id to the specific item in the list or a class to the group of items in the list it depends on what you want to modify.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ol class = "list">
<li id = "one">One</li>
<li id = "two">Two</li>
<li id = "three">Three</li>
<li id = "four">Four</li>
</ol>
</body>
</html>
Now in your css file you just have to targe what you want to give style. If its an id you have tou use a "." and the name of the id like: ".one" or if its a class you have tu use the "#" like this: "#list"
Related
I am trying to display a plain html/css loading spinner on first load in my Angular APP. The spinner code is included in my index.html.
However, the dom seems not to be rendered until my angularjs APP starts kicking in, causing a very lengthy display of a white screen until this finally happens. Is there any way to prevent that?
I would like to understand how to load my plain html/css spinner right after the css code in the head is done loading so as to improve user experience.
Test on webpagetest.org seem to confirm this diagnosis (the /settings, /introductions, /menus lines are all calls to an external API done by an AngularJS service before render):
Here is a simplified version of my build code:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<title ng-bind="($title || 'Home') + ' - WalktheChat'">WalktheChat</title>
<link rel="stylesheet" href="styles/lib.css">
<link rel="stylesheet" href="styles/app.css">
</head>
<body>
<div id="base-container" ng-controller="Shell as main">
<div ng-include="'app/layout/header.html'"></div>
<div id="content" ui-view ng-cloak autoscroll="true"></div>
<div ng-include="'app/layout/footer.html'"></div>
</div>
<!-- This is the spinner I would like to display on first load -->
<div ng-show="::false" class="spinner-container">
<div class="spinner sk-spinner sk-spinner-pulse"></div>
</div>
<script src="js/lib.js"></script>
<script src="js/app.js"></script>
</body>
</html>
whatever the complexity of your application,all your controllers are within the same angular application, all scopes within the same application inherits from the same root, whatever you define on the $rootScope will be available to all child scopes.
we have two ways to resolve this problem:
use $broadcast(), $emit() and $on() that facilitate event driven publisher-subscriber model for sending notifications and passing data between your controllers.(professional solution)
declare $rootScope variable and watching changement.(simple way)
It turns out the problem was coming from "render-blocking javascript", I had to add the "async" tag to my JS to fix it.
When adding async to both my lib.js and app.js, I had an issue with app.js loading before angular scripts were loaded (thus causing the APP to throw an error). In order to solve this issue, I combined my lib.js and app.js into one single file and then added the async tag.
My final build code looks like that (the magic happens on the final "script" tag):
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<title ng-bind="($title || 'Home') + ' - WalktheChat'">WalktheChat</title>
<link rel="stylesheet" href="styles/lib.css">
<link rel="stylesheet" href="styles/app.css">
</head>
<body>
<div id="base-container" ng-controller="Shell as main">
<div ng-include="'app/layout/header.html'"></div>
<div id="content" ui-view ng-cloak autoscroll="true"></div>
<div ng-include="'app/layout/footer.html'"></div>
</div>
<!-- This is the spinner I would like to display on first load -->
<div ng-show="::false" class="spinner-container">
<div class="spinner sk-spinner sk-spinner-pulse"></div>
</div>
<!-- This app.js now also contains lib.js from my question !-->
<script src="js/app.js" async></script>
</body>
</html>
I am new to angular.js and I was trying my hands on it. Can anyone please tell me why this program is not running?
HTML code:
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<link data-require="bootstrap#*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script data-require="bootstrap#*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.js"></script>
<script data-require="jquery#>=1.9.1 <3" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script data-require="angular.js#*" data-semver="2.0.0-alpha.45" src="https://code.angularjs.org/2.0.0-alpha.45/angular2.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div ng-controller="SimpleController">
Name:
<br/>
<input type="text" ng-model="name" />
<br/>
<ul>
<li ng-repeat="cust in customers | filter:name"></li>
</ul>
</div>
</body>
</html>
JS code:
// Code goes here
var demoApp = angular.module ('demoApp', []);
function SimpleController($scope){
$scope.customers=[
{name:'xx xx' city:'xx'},
{name:'yy yy' city:'yy'},
{name:'zz zz' city:'zz'}
];
}
demoApp.controller('SimpleController', SimpleController);
You have several errors in you sample:
The main problem is that you're using the Angular 1.x.x syntax while you have the Angular 2.x.x script included in your app. Change the script for the previous release of the framework.
<script data-require="angular.js#1.4.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js" data-semver="1.4.8"></script>
The customers object is not a valid JSON as separation commas between properties are missing. It should look like this:
$scope.customers=[
{name:'parikshit mishra', city:'jaipur'},
{name:'nirmal vatsyayan', city:'delhi'},
{name:'ningning numeyi', city:'noida'}
];
You don't show anything using ng-repeat directive, you simply create several empty <li> tags, hence there's no content inside them. You need to display the variable that you iterate. If you want to show only the name property of the object, use simple dot syntax.
<li ng-repeat="cust in customers">{{cust.name}}</li>
Your input filed has ng-model attached, but you don't use the variable that is bound to it. You can refer to the variable with {{name}}.
Name: {{name}}<br/>
<input type="text" ng-model="name"/>
To see the big picture, here's the fixed sample.
Please refer to below code
HTML
<h1>Hello Plunker!</h1>
<div ng-controller="SimpleController">
Name: <br/>
<input type="text" ng-model="name"/>
<br/>
<ul>
<li ng-repeat="cust in customers| filter:name">{{cust}}</li>
</ul>
</div>
Angular
var demoApp = angular.module ('demoApp', []);
function SimpleController($scope){
$scope.customers=[
{name:'parikshit mishra', city:'jaipur'},
{name:'nirmal vatsyayan', city:'delhi'},
{name:'ningning numeyi', city:'noida'}
];
}
demoApp.controller('SimpleController', SimpleController);
Please refer
Problem
$scope.customers is not a valid object(missing commas between properties).
You have not displayed anything inside ng-repeat. Please use {{cust}}. Please refer ng-repeat.
The scripts inside your plunker are wrong.
Here is the fiddle demo.
js
$scope.customers=[
{name:'parikshit mishra', city:'jaipur'},
{name:'nirmal vatsyayan', city:'delhi'},
{name:'ningning numeyi', city:'noida'}
];
html
<li ng-repeat="cust in customers | filter:name">
{{ cust.name }}
</li>
hope this will help you
I am implementing a Search feature in my AngularJS tutorial application. So, whenever a user types in the Search <input> field, I want to change my document's <title>.
For this, I am using query model with ng-bind-template in my document's <title> to avoid double curly braces {{}} flicker effect when application loads.
Following is my code for reference.
<!DOCTYPE html>
<html lang="en" ng-app="phonecatApp" ng-controller="PhoneListCtrl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="icon" href="/assets/img/fav.png">
<title ng-bind-template="Phonecat | {{query}}">Phonecat</title>
<link rel="stylesheet" href="/assets/css/app.css">
<script src="/assets/js/angular/angular.min.js"></script>
</head>
<body>
<div>
<span>Search: </span><input ng-model="query" />
</div>
<ul>
<li ng-repeat="phone in phones | filter:query">
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul>
<p>Total number of phones: {{phones.length}}</p>
<script src="/assets/js/app.js"></script>
</body>
</html>
Here, my <title> tag has ng-bind-template directive with query model & pre-defined content,
Phonecat
Now, when page loads document <title> is set to,
Phonecat |
Instead of just "Phonecat".
I don't want ng-bind-template to evaluate & change my document's <title> if query model is EMPTY. If query model is EMPTY, it should just display the initial content (Phonecat in this case) as document's Title & when the query model is updated & NOT EMPTY, it should update the Title (i.e. Phonecat | nexus mobile).
It will be great if someone can explain how to approach this.
Thanks!
You can use the ternary operator inside ng-binding to conditionally build the title:
<title ng-bind="query ? 'Phonecat | ' + query : 'Phonecat'">Phonecat</title>
Alternatively:
<title>{{ query ? 'Phonecat | ' + query : 'Phonecat'}}</title>
I'm using Angular Snap module but I can't make it only use a section of my page. For example I want yo leave header and footer intact when "snaping".
The follow example code describe my issue http://plnkr.co/edit/qOilojtXpCcBm99ynuzQ?p=preview
Code
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="angular-snap.css" type="text/css" />
<script src="snap.js" type="text/javascript" charset="utf-8"></script>
<script data-require="angular.js#1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js" data-semver="1.2.4"></script>
<script src="angular-snap.js" type="text/javascript" charset="utf-8"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<!-- Header Image should here -->
<header>
<h1>Header</h1>
</header>
<!-- Menu Bar goes here -->
<div class="wrapper">
<div class="menu-holder">
<ul class="menu">
<li>item 1
</li>
<li class="active"><a class="test" href="#">This is the one</a>
<ul class="submenu">
<li>Submenu item 1
</li>
<li>Submenu item 2
</li>
</ul>
</li>
<li>menu item 3
</li>
<li>menu item 4
</li>
</ul>
</div>
<!-- menu-holder end -->
</div>
<!-- Both Snap-drawer and Snap-content should go below the Menu bar -->
<snap-drawer>
<button snap-toggle>Another Toggle Button</button>
</snap-drawer>
<snap-content snap-options="{tapToClose:false}">
<button snap-toggle>Toggle</button>
</snap-content>
</body>
</html>
Thanks
Plugin creator gives me answer for this on https://github.com/jtrussell/angular-snap.js/issues/75
I copy answer here for Archive purpose:
It's doable, here's an example with a fixed footer from a previous
thread, Snap still applies to the whole page we're just showing
content over it:
http://plnkr.co/edit/Vdz0AZ3tnlfErERmjcrY?p=preview
You can change it to a fixed header by updating the nav element like
so:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="background:red">
<div class="container">
Bottom container stuff!
</div>
</nav>
Just fair warning there are some issues with using fixed position
elements, just something to keep in mind.
The snap-content directive should expand to fill it's container, so
you may also be able to get something working by wrapping that element
in a non-static positioned element. Here's a rough demo.
I am trying to build a tab set that would dynamically change on user action using bs-tabs angularstrap directive and ng-repeat (Say initially the tabs were a,b,c. On some user action it should change to x,y,z)
I am trying to do this by pointing the ng-repeat to a new array object on an user action say a click of a button.
Instead of the tab set getting refreshed, I am noticing a strange behavior
Ive recreated it in this plnkr, please have a look at it,
http://plnkr.co/edit/bpKDx56bieIshKaedzv6?p=preview
<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8">
<title>AngularStrap - Tab directive</title>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="//mgcrea.github.com/angular-strap/css/prettify.css" rel="stylesheet">
<!-- required libraries -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="//mgcrea.github.com/angular-strap/js/angular-strap.js"></script>
<!-- optional libraries -->
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/0.6.0/fastclick.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.js"></script>
<link rel="stylesheet" href="style.css">
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div data-fade="1" ng-model="tabs.activeTab" bs-tabs>
<div ng-repeat="tab in tabs" data-title="{{tab.title}}"><p>{{tab.content}}</p></div>
</div>
<button type="button" class="btn btn-primary" ng-click="changeTabs()">Show different set of tabs</button>
</body>
</html>
Looking at the code it seems that the tab directive observes the active tab value and refreshes only the tab content using transclusion, whereas the tab title is only assigned initially.
I think the only way to change title dinamically is creating a new directive that creates a tab directive dinamically, initializing it with the fresh values.