In AngularJS, I have one textbox and while writing message if we type # then it should display list of names which is in arraylist.
Kindly help how can I do this feature using angularjs.
Thanks in advance
first you should publish what you have tried so far.. then only will help us to help you further...
here i wrote search alone..
for string specific,
you have to write function inside ng-change="func_name(your_txt)"
read the text use substr to find whether your text contains # if its do filter.. here i wrote filter inside ng-repeat can write filter on change will answer.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Angular animated search box - sibeeshpassion </title>
<style>
.inputText {
border: 1px solid #ccc;
border-radius: 10px;
background-color: #0ff;
box-shadow: 1px 1px 1px 1px #ccc;
width: 230px;
height: 30px;
}
ul {
list-style: none;
padding: 10px;
background-color: #CAEAF5;
border-radius: 10px;
border: 1px solid #ccc;
width: 210px;
}
li {
border: 1px solid #ccc;
border-right: none;
border-left: none;
padding: 2px;
text-align: center;
}
</style>
</head>
<body ng-app ng-init="placesVisited=['Delhi','Kerala','Tamil Nadu','Banglore','Uttar Pradesh','Noida','Haryana','Thrissur'];">
<div>
<input type="text" ng-change="do_on_at(curPlace)" ng-model="curPlace" class="inputText">
<ul>
<li ng-repeat="place in placesVisited | filter:curPlace">
<span>{{place}} </span>
</li>
</ul>
</div>
</body>
</html>
Related
The problem is: when changing width of a window in Chrome or Safari, my grid element would create 1 additional row to fit its children, and when the window is shrunk even further it won't create any more rows, it keeps just 2 rows and, instead, begins to resize itself (pic.3).
It's the first time I see this problem and, honestly, can't understand what I'm missing there.
I've tested the same HTML file in Firefox -- and it works how intended (pic.1). The grid works just fine, creating as many rows as it needs to fit all its children. I have replicated the same styles and structure in CodePen, and it works fine on CodePen page in Chrome (pic.2), but if I download my CodePen project and open it in Chrome or Safari like an HTML file -- it has the same problem (pic.3).
I'd appreciate any suggestion or a correction. Thanks for your time.
CodePen link: https://codepen.io/vkharlakov/pen/wvjEgWM
HTML
<html>
<body>
<main>
<section>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</section>
</main>
</body>
</html>
CSS
body {
display: flex;
flex-direction: column;
align-items: center;
background-color: plum;
}
main {
width: 100%;
max-width: 1920px;
display: flex;
flex-direction: column;
justify-content: center;
}
section {
width: 100%;
display: flex;
justify-content: center;
background-color: white;
}
ul {
width: 100%;
margin: 30px;
gap: 20px;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, 250px);
grid-auto-rows: 350px;
justify-content: space-evenly;
}
li {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
border: 3px solid steelblue;
padding: 10px;
}
If you found yourself searching the Internet with the same question, consider including this meta tag in your <head></head> section of your page:
<meta name="viewport" content="width=device-width, initial-scale=1"/>
It fixed the issue for me. Hope it helps you too!
This layout is breaking in Outlook only. I can't remember where I got the template from, so I can't give credit where it's due, but I believe it's one of Lee Munroe's templates. I can't figure out why it's breaking in Outlook 2013 and it's a simple one-column layout. I have a more complex one-column layout that I'm using with the same framework, and that one gives me no trouble at all. But when I tried to parse it down into a simpler layout, I cannot get it to play nicely with Outlook. Any ideas? Self-taught coder so I could be missing something simple. I know Outlook can't handle max-width, but this template was supposed to be Outlook ready.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>A Message from the CEO</title>
<style type="text/css">
img {
border: none;
-ms-interpolation-mode: bicubic;
max-width: 100%; }
.img-block {
display: block; }
body {
font-family: open sans, sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 14px;
line-height: 1.4;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; }
table {
border-collapse: separate;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
width: 100%; }
table td {
font-family: open sans, sans-serif;
font-size: 14px;
vertical-align: top; }
body {
background-color: #F6F6F6;
Margin: 0;
padding: 0; }
.body {
background-color: #F6F6F6;
width: 100%; }
.container {
Margin: 0 auto !important;
max-width: 600px;
padding: 30px;
width: auto !important;
width: 600px; }
.content {
box-sizing: border-box;
display: block;
Margin: 0 auto;
max-width: 600px;
padding: 0px; }
.main {
background: #FFFFFF;
border-radius: 3px;
width: 100%; }
.wrapper {
box-sizing: border-box;
padding: 30px; }
.header {
background-color: #FFFFFF;
Margin-bottom: 0px;
Margin-top: 0px;
padding: 0px 0px 0px 0px;
width: 100%; }
.header > table {
min-width: 100%; }
h1,
h2,
h3,
h4 {
Margin: 0; }
h1 {
font-family: open sans, sans-serif;
font-size: 1.4em;
font-weight: 700;
color: #7D1745;
text-align: left;
line-height: 1.4;
Margin-bottom: 10px; }
h2 {
font-family: open sans, sans-serif;
font-size: 1.2em;
font-weight: 700;
color: #3C708F;
text-align: left;
line-height: 1.4;
Margin-bottom: 15px; }
h3 {
font-family: open sans, sans-serif;
font-size: 1.2em;
font-weight: 700;
color: #7D1745;
text-align: left;
line-height: 1.4;
Margin-bottom: 15px; }
h4 {
font-family: open sans, sans-serif;
font-size: 1em;
font-weight: 700;
color: #454646;
text-align: left;
line-height: 1.4;
Margin-bottom: 15px; }
ul,
ol {
font-family: open sans, sans-serif;
font-size: 1em;
font-weight: normal;
color: #454646;
Margin: 0;
Margin-bottom: 20px; }
p li,
ul li,
ol li {
list-style-position: outside;
Margin-left: 15px;
padding: 0;
text-indent: 0; }
ul,
ol {
Margin-left: 5px;
padding: 0;
text-indent: 0; }
a:link {
font-family: open sans, sans-serif;
color: #3C708F;
font-size: 1em;
font-weight: 700;
text-decoration: none; }
a:hover {
font-family: open sans, sans-serif;
color: #56A2CC;
font-size: 1em;
font-weight: 700;
text-decoration: none; }
a:active {
font-family: open sans, sans-serif;
color: #3C708F;
font-size: 1em;
font-weight: 700;
text-decoration: none; }
a:visited {
font-family: open sans, sans-serif;
color: #3C708F;
font-size: 1em;
font-weight: 700;
text-decoration: none; }
.preheader {
color: transparent;
display: none;
height: 0;
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
mso-hide: all;
visibility: hidden;
width: 0; }
#media only screen and (max-width: 600px) {
h1 {
font-size: 24px !important;
Margin-bottom: 10px !important; }
h2 {
font-size: 21px !important;
Margin-bottom: 10px !important; }
h3 {
font-size: 21px !important;
Margin-bottom: 10px !important; }
h4 {
font-size: 18px !important;
Margin-bottom: 10px !important; }
p,
ul,
ol,
td,
span,
a {
font-size: 16px !important; }
.wrapper {
padding: 10px !important; }
.content {
padding: 0 !important; }
.container {
padding: 0 !important;
width: 100% !important; }
.header {
Margin-bottom: 10px !important; }
.main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important; }
.img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important; } }
#media all {
.ExternalClass {
width: 100%; }
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%; }
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important; } }
</style>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body class="">
<table border="0" cellpadding="0" cellspacing="0" class="body">
<tr>
<td class="container">
<div class="content">
<!-- START CENTERED WHITE CONTAINER -->
<span class="preheader">Read the latest update from Johnson Financial Group.</span>
<table class="main" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="https://app.subscribermail.com/images/pp/56502968/2018_Images/Jim_Popp_600px.jpg" title="A Message from the CEO" alt="Header Image" width="600" class="img-responsive" border="0"></td>
</tr>
<tr>
<td class="wrapper">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<h1>Headline</h1>
<p>Content here. Blah blah blah blah.</p>
<h2>Subheadline 1</h2>
<p>Content here. Blah blah blah blah.</p>
<h3>Subheadline 2</h3>
<p>Content here. Blah blah blah blah. <strong style="font-weight: 700;">Read More</strong></p>
<h4>Subheadline 3</h4>
<p>Content here. Blah blah blah blah.</p>
<p><img src="https://app.subscribermail.com/images/pp/56502968/2018_Images/Jim_Popp.png" title="Jim Popp, CEO Johnson Financial Group" alt="Jim Popp" width="100" class="img-responsive" border="0" /></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="wrapper">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<img src="https://app.subscribermail.com/images/pp/56502968/2018_Images/JFG-HRZ-Web-200px.png" title="Johnson Financial Group" alt="JFG Logo" width="200" class="img-responsive" border="0" /><br />
<div> </div>
<strong style="font-weight: 700;">BANKING</strong>
<strong style="font-weight: 700;">WEALTH</strong>
<strong style="font-weight: 700;">INSURANCE</strong><br />
<div> </div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END CENTERED WHITE CONTAINER -->
</div>
</td>
</tr>
</table>
</body>
</html>
Your problems extend far beyond Outlook 2013. These problems are occurring in Outlook 2007-2016, Windows 10 Mail and Android devices.
The problem resides within the <style> sheet. If you comment out your style sheet, everything works fine when tested in Litmus.
The <style> sets the desktop <table> width to width: 100%;. But you don't want your tables at 100%, you wanted them at 600px.
table {
border-collapse: separate;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
/*width: 100%; <-- don't use this */
width: 600px;
}
Go through your <style> sheet and change width:100%; values to width: 600px;. This includes #media all, but you can skip #media only screen and (max-width: 600px) since those table values should be 100% width.
You need to figure out a way to make the controlling table 100% width and center the container tables in the parent table.
Other Issues
Your preview text is not working in Android. It's showing up and I think you want to hide it.
Open Sans will never work in Outlook or Gmail, since neither works with web fonts. You can use it for Apple, IOS, Android, AOL and other clients. I strongly suggest you use a link to a style sheet like this:
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
Add that to your <head>.
Use this instead in your style sheet for Open Sans as recommended by Google Fonts:
font-family: 'Open Sans', Arial, sans-serif;
You should set a default fallback font, which is currently set to sans-serif to ensure the right font is used. I suggest adding one more web safe font as a fallback for consistency, because Outlook has a bad habit of reverting to Times New Roman and you don't want a serif typeface.
Good luck.
Edit: I edited this answer because I did not make it clear you could skip editing values for this media query: #media only screen and (max-width: 600px).
I am trying to use meter tag to show battery power indicator. It works with hard coded value but does not work with $scope variable.Here is the jsfiddle
HTML
<div ng-app="app" ng-controller="main">
<div id="page-wrapper">
<p>
<meter min="0" max="4" low="1" high="3" optimum="4" value="2"></meter>
</p>
<p>
<meter min="0" max="4" low="1" high="3" optimum="4" value="value"></meter>
</p>
</div>
</div>
**JS*
angular.module("app", [])
.controller("main", ['$scope', function($scope) {
$scope.value = 2
}])
You have to use {{value}} to reflect the scope value.
So use,
value="{{value}}"
instead of
in value="value"
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<style>
.styled meter {
/* Reset the default appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: 30px;
/* For Firefox */
background: #EEE;
box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset;
border-radius: 3px;
}
/* WebKit */
.styled meter::-webkit-meter-bar {
background: #EEE;
box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset;
border-radius: 3px;
}
.styled meter::-webkit-meter-optimum-value,
.styled meter::-webkit-meter-suboptimum-value,
.styled meter::-webkit-meter-even-less-good-value {
border-radius: 3px;
}
.styled meter::-webkit-meter-optimum-value {
background: #86CC00;
}
.styled meter::-webkit-meter-suboptimum-value {
background: #FFDB1A;
}
.styled meter::-webkit-meter-even-less-good-value {
background: #CC4600;
}
/* Firefox */
.styled meter::-moz-meter-bar {
border-radius: 3px;
}
.styled meter:-moz-meter-optimum::-moz-meter-bar {
background: #86CC00;
}
.styled meter:-moz-meter-sub-optimum::-moz-meter-bar {
background: #FFDB1A;
}
.styled meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
background: #CC4600;
}
button {
display: inline-block;
border-radius: 3px;
border: none;
font-size: 0.9rem;
padding: 0.4rem 0.8em;
background: #69c773;
border-bottom: 1px solid #498b50;
color: white;
-webkit-font-smoothing: antialiased;
font-weight: bold;
margin: 0 0.25rem;
text-align: center;
}
button:hover, button:focus {
opacity: 0.75;
cursor: pointer;
}
button:active {
opacity: 1;
box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1) inset;
}
</style>
<div ng-app="myApp" ng-controller="myCtrl">
<div id="page-wrapper">
<p>
<meter min="0" max="4" low="1" high="3" optimum="4" value="4"></meter>
</p>
<p>
<meter min="0" max="4" low="1" high="3" optimum="4" value="{{value}}"></meter>
</p>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.value = 2
});
</script>
</body>
</html>
PLEASE RUN THE ABOVE SNIPPET
Here is a working DEMO
Some observations as per your fiddle :
You forgot to include AngularJS library in your fiddle.
To get the $scope value into the HTML . Use angular expression {{value}}
Change LOAD TYPE to No wrap - in <head> from onLoad in JAVASCRIPT section of the fiddle.
DEMO
As shown how do I enter my phone number through that keyboard.
I am trying but my method is overloading the previous button values.
So please can one help me how to do that...
I think we need to concatenate the buttons value. If I press button "1" the value in textfield should be "1", if I then press "2" the value in textfield should become "12".
everything works properly except these.
clear button it clears the textfield
angular.module('myApp', [])
.controller('MyCtrl', function($scope)
{
$scope.chandru = false;
$scope.noinput = "";
$scope.newNumber = true;
$scope.cleartext = function()
{
$scope.noinput = "";
};
$scope.hideshow = function(id)
{
$scope.chandru = true;
};
$scope.updateOutput = function(btn)
{
if($scope.noinput == "" || $scope.newNumber) {
$scope.noinput = btn;
$scope.newNumber = false;
} else {
$scope.noinput += String(btn);
}
};
});
.mainform {
background-color: #c0c0c0;
margin-right: 300px;
margin-bottom: 100px;
margin-top: 100px;
margin-left: 300px;
border-radius: 10px;
padding-left: 30px;
padding-bottom: 30px;
padding-top: 30px;
padding-right: 30px;
}
.Head {
color: #4169E1;
border-bottom: 2px solid #DC143C;
font-family: Righteous;
}
.inputprop {
border-radius: 5px;
border: 1px solid black;
height: 30px;
}
.classnumber {
border: 2px solid black;
border-radius: 5px;
padding-left: 10px;
margin-right: 5px;
width: 35px;
height: 30px;
font-size: 20px;
}
.classClear {
border: 2px solid black;
border-radius: 5px;
padding-left: 10px;
margin-right: 5px;
width: 70px;
height: 30px;
font-size: 20px;
}
.classOk {
border: 2px solid black;
border-radius: 5px;
padding-left: 10px;
margin-right: 5px;
width: 50px;
height: 30px;
font-size: 20px;
}
#buttondesign {
display: inline;
border: 2px solid black;
width: 40px;
height: 40px;
border-radius: 5px;
}
.clearbutton {
border: 2px solid black;
width: 60px;
height: 40px;
border-radius: 5px;
}
.okbutton {
border: 2px solid black;
width: 50px;
height: 40px;
border-radius: 5px;
}
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8"/>
<title>My Task</title>
<link rel="stylesheet" type="text/css" href="styele.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="controller.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="mainform">
<h1 class="Head"> SignUp</h1>
<div style="color: #4682b4; font-size: 20px;">
<center>
Enter mobile number:
<select class="inputprop">
<option value="IND(91)">IND(91)</option>
<option value="PAK(92)">PAK(92)</option>
<option value="SRL(93)">SRL(93)</option>
<option value="NUL(92)">NUL(92)</option>
</select>
<input class="inputprop"type="text" name="mobileno" value="{{noinput}}"
ng-model="noinput" placeholder="enter mobile number"/><br><br>
Press OK to send OTP
</center><br><br>
<center><div ng-init="num=['1','2', '3', '4', '5', '6', '7', '8', '9', '0']">
<div style="display: inline;"ng-repeat="item in num">
<button id="buttondesign" type="button" name="namebutton"
ng-click="updateOutput({{item}})">{{item}}</button>
</div>
<input class="clearbutton" type="button" value="Clear" ng-click="cleartext()"/>
<input class="okbutton"type="button" value="OK" ng-click="hideshow('second')"/>
</div>
</center>
</div>
</div>
</body>
</html>
you can put a ng-click="buttonPressed(number)" on each button.
<button ng-click="buttonPressed(1)>1</button>
<button ng-click="buttonPressed(2)>2</button>
<button ng-click="buttonPressed(3)>3</button>
...
So when you press a button it call this function.
Then in your controller you declare this function like this
var pressed = [];
$scope.buttonPressed = function(number){
pressed.push( number ) ;
console.log(pressed);
// to other stuff
}
I am new to angularjs and web development is already not my forte, but I did search for an answer to this issue and can't find anything.
I am using ng-repeat on a div displayed as inline-block. I'm getting weird top and bottom spacing. I have a screenshot here: https://www.dropbox.com/s/dt2jw4cyv609t5q/screenshot.png.
Here is the base html:
<html>
<head>
<title>Knock Admin V1.0</title>
<script type="text/javascript" src="/assets/js/angular.js"></script>
<script type="text/javascript" src="/assets/js/angular-route.js"></script>
<script type="text/javascript" src="/assets/ng/admin/app.js"></script>
<link rel="stylesheet" type="text/css" href="/assets/ng/admin/css/style.css">
</head>
<body ng-app="admin">
<div id="sidebar">
Welcome
<br>Logout
</div>
<div id="view">
<div ng-view></div>
</div>
</body>
</html>
And the view template:
<h3>My Locations</h3>
<label for="filter">Filter:</label><input type="text" id="filter" ng-model="filter.input" />
<div id="locationCardCollection">
<div class="locationCard" ng-repeat="loc in locations | filter:filter.input" >
{{ loc.chain.name }} - {{ loc.name }} <br>
{{ loc.message }}
</div>
</div>
And lastly, the CSS:
body, div {
margin: 0;
padding: 0;
}
body{
background-color: #E4E4E4;
}
#view {
padding: 10px;
margin-left: 200px;
overflow: hidden;
}
#sidebar {
position: fixed;
height: 100%;
width: 200px;
background-color: #555555;
color: #FFFFFF;
}
div.locationCard {
background: #FFFFFF;
display: inline-block;
height: 400px;
width: 300px;
margin: 10px;
-webkit-box-shadow: 5px 5px 10px 1px #404040;
box-shadow: 5px 5px 10px 1px #404040;
}
div.locationCard.hover {
background-color: #FF0000;
}
I'm not doing anything tricky with formatting in the angular app code, so I'll leave that out unless otherwise requested. Can someone give me a hand here?
Thanks!
Added overflow: hidden to locationCard CSS.