http://plnkr.co/edit/cJsScs8ixF1aq85Ri7nV?p=preview
filter is not working. Other part of code also breaks. Throwing error filter:notarray. how it can be fixed
<head>
<link rel="stylesheet" href="style.css">
</head>
<body ng-init="items=[3,1,2,3];">
<h1>Hello Plunker!</h1>
<div >
</div>
<input type="text" ng-model="nm" />
<div ng-repeat="item in items track by $index | filter:nm" ng-hide="hide">
{{item}}
</div>
<button ng-click="hide=!hide">Toggle </button>
<button ng-click="items[items.length]=items.length">Add</button>
<script src="https://code.angularjs.org/1.4.2/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
The documentation for ng-repeat says:
track by must always be the last expression
So you need to change this line:
<div ng-repeat="item in items track by $index | filter:nm" ng-hide="hide">
to this:
<div ng-repeat="item in items | filter: nm track by $index" ng-hide="hide">
I know it's obscure, and this one catches people out. Often the documentation isn't on the page you expect it to be (e.g. filter) but is still in a logical place (e.g. ng-repeat). It 'should' all be there.
Related
I have a page which contains FAQ.
The idea is to implement a search box which has the look & feel of the one shown on Font awesome Icons
With a bit of online help I've been able to produce the following code:
<%# Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testing a search bar</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://use.fontawesome.com/e34d8d1dc9.js"></script>
<script src="/Scripts/Searchbar.js"></script>
<link href="/CSS/woff2.css" rel="stylesheet" type="text/css" />
<link href="/CSS/site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container" data-view="search">
<div class="row">
<div class="col-md-10 col-sm-9">
<section id="search">
<label for="searchinput"><i class="fa fa-search" aria-hidden="true"></i><span class="sr-only">Search FAQ</span></label>
<input id="searchinput" class="form-control input-lg" placeholder="Search FAQ" autocomplete="off" spellcheck="false" autocorrect="off" tabindex="1">
</section>
</div>
</div>
<div id="faqs">
<h3>Question 1</h3>
<section>
Answer 1<br> abc
</section>
<h3>Question 2</h3>
<section>
Answer 2<br>xyz
</section>
<h3>Question 3</h3>
<section>
Answer 3<br>def
</section>
</div>
</div>
</body>
</html>
The code uses 2 css - files:
site.css
enter link description here
and 1 java script file.
Though the page (this is just a test of course) has the look & feel I'm looking for, the search functionality doesn't work yet.
I based it on on a working example
Can anyone here tell me what I have to do to make it work just like the example?
I managed to get it working with a bit of tinkering. :-)
Testing a search bar
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://use.fontawesome.com/e34d8d1dc9.js"></script>
<script src="/Scripts/FontAwesome.js"></script>
<%-- <link href="/CSS/woff2.css" rel="stylesheet" type="text/css" />
<link href="/CSS/site.css" rel="stylesheet" type="text/css" />
--%>
<link href="/CSS/woff2.css" rel="stylesheet" type="text/css" />
<link href="/CSS/searchbar.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container" data-view="search">
<div class="row">
<div class="col-md-10 col-sm-9">
<section id="search">
<label for="searchinput"><i class="fa fa-search" aria-hidden="true"></i><span class="sr-only">Search
FAQ
<div id="faqs">
<h3>Question 1</h3>
<section>
Answer 1<br> abc
</section>
<h3>Question 2</h3>
<section>
Answer 2<br>xyz
</section>
<h3>Question 3</h3>
<section>
Answer 3<br>def
</section>
</div>
</div>
<script src="/Scripts/Searchbar.js"></script>
</body> </html>
As you can see I put searchbar.js at the lowest level possible, and I replace site.css with searchbar.css
I think an even better solution for this would be to introduce a lightweight MVVM framework like knockout.js. With this you could put all of your FAQ's into a view model and easily add a search functionality that way. This will clean up your HTML significantly, especially if you get more and more FAQ's added to your site.
Try putting question objects inside an array, then filter them on search:
Demo: https://jsfiddle.net/sjx5uorg/2/
var searchBox = $('#searchinput');
var faqs = [
{
question: "This is first question",
answer: "Answer 1"
},
{
question: "Another question. Second?",
answer: "Answer 2"
},
{
question: "Question 3",
answer: "Answer 3"
},
{
question: "Question 4",
answer: "Answer 4"
}
]
function updateList(faqArray) {
var faqList = $('#faq-list');
faqList.html('');
$.each(faqArray, function(faq) {
faq = faqArray[faq];
faqList.append('<li><h3>'+ faq.question +'</h3><p>'+ faq.answer +'</p></li>');
});
}
updateList(faqs);
searchBox.keyup(function(event) {
var searchList = faqs.filter(function(faq){
var question = faq.question.toLowerCase();
return question.indexOf(searchBox.val().toLowerCase()) >= 0
});
updateList(searchList);
});
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<label>
Search: <input id="searchinput" />
</label>
<ul id="faq-list"></ul>
Being new to bootstrap and scripting with html/css in general, I am attempting to create a simple html table (one row with three columns). Each column is to be even (taking up one third of the table which it exists inside of. The problem I am encountering is that it appears to be taking up only two-thirds (2/3) of the available space with in the table. I've looked on the internet for solutions, googled, read a several posts/articles on stack and other places, but I've not found a solution and am hoping for help.
You can see a straight html render of the error here
Here is a picture detailing the issue:
As the example image shows the thin red column is taking up one third of the table space (green bordered table), however that table is not expanding to occupy the full space available to it in the red div. I've looked for through the html render and not found a cause for the issue.
<div class="area">
<section class="wrapper scrollable">
<div class="main-grid">
<div class="agile-grids">
<!-- blank-page -->
<div class="blank">
<div class="blank-page">
<h1>Session is active</h1>
<table class=" " style="border: 1px solid red;">
<tbody>
<tr scope="row" style="border: 1px solid red;">
<td class="text-center" style="border: 1px solid green;">
<div class="col-lg-4 col-md-6 col-sm-12" style="border: 1px solid red;">
<div class="card_user-charProfile">
<img class=" img-fluid" style="width: 100%;" src="http://localhost/wBase/zUploads/cImg/3bgCard.jpg" alt="Wiccan">
<div class="card">
<div class="card">
<p> content goes here</p></div>
</div>
</div> <!-- end row -->
</div><!-- end CHARACTER PROFILE OUTER DIV -->
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
</div>
Here are the CSS declarations / links
<script language="JavaScript" type="text/javascript">
<!-- This JS disallows hijacking into someone else's frame...
if (top.location != self.location){top.location=self.location}
//-->
</script>
<link href="../__themes/bs4_marvelCSS/bs4_bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../__themes/bs4_marvelCSS/bs4_dashV3.css" rel="stylesheet">
<link href="../__themes/bs4_marvelCSS/style_sticky-footer-navbar.css" rel="stylesheet">
<link href="../__themes/bs4_marvelCSS/bs4_dashTweaks.css" rel="stylesheet">
<!-- font CSS -->
<!-- roboto -->
<link href="//fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic" rel="stylesheet" type="text/css">
<!-- lato -->
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<!-- hammersmith one -->
<link href="https://fonts.googleapis.com/css?family=Hammersmith+One" rel="stylesheet">
<!-- __themes/_fonts/font-glyphicons.css -->
<link href="../__themes/bs4_marvelCSS/font.css" rel="stylesheet">
<link href="../__themes/bs4_marvelCSS/font-awesome.css" rel="stylesheet">
<link href="../__themes/bs4_marvelCSS/font-glyphicons.css" rel="stylesheet">
<script type="application/x-javascript">addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<script>
$(function () {
$("#supported").text("Supported/allowed: " + !!screenfull.enabled);
if (!screenfull.enabled) {
return false;
}
$("#toggle").click(function () {
screenfull.toggle($("#container")[0]);
});
});
</script>
Why are you using the table? You can handle that all with the bootstrap grid system. Avoid using table in your project. But I will suggest you to give it a width:
td{width:100% !important;}
Try doing this it may help you.
I am loading up and using bootstrap like this, but the styles are not actually being applied to my row and col divs. In my network monitor I can see the css is being successfully loaded, yet for some reason it just isnt doing anything. Really stumped here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="row">
<div class="col-4">
<label for="name">Name</label>
<input id="name" />
</div>
</div>
<div class="row">
<div class="col-4">
<label for="number">Number</label>
<input id="number" />
</div>
</div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Number</th>
</tr>
</thead>
</table>
</body>
</html>
EDIT:
I changed my link to use Bootstrap 4 and it still isnt working
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="row">
<div class="col-md-4">
<label for="number">Number</label>
<input id="number" />
</div>
<div class="col-md-4">
<label for="number">Number</label>
<input id="number" />
</div>
<div class="col-4">
<label for="number">Number</label>
<input id="number" />
</div>
</div>
Maybe I'm wrong but with my experience in bootstrap you have the specify the screen size when you're using the column features. Just use medium when you're building something that should fit across all platforms.
I think you are using the wrong CSS class names. You are loading a bootstrap 3.x version, and it uses different classes for different device resolutions:
If you want a block that occupies 4 columns, you need to use col-xs-4 for extra-small devices (<768px width), col-sm-4 for small, col-md-4 for medium size and col-lg-4 for large devices (>1200px).
You may check the documentation at: https://getbootstrap.com/docs/3.3/css/#grid-options
I used to work with jquery and it was easy to manipulate dom or even hide some content and show another inside a container. Need help in Angularjs to achieve something similar to show or hide a template inside a container on button click.
My main reports page
<div style="margin-left:25px;margin-bottom:10px">
<button class="btn glyphicon glyphicon-stats" ng-click="showChartView()"></button>
<button class="btn glyphicon glyphicon-th-list" ng-click="showTableView()"></button>
</div>
<div class="row" style="width:100%; margin:0px">
<!--Chart or Table view-->
<div class="col-md-10" style="width:70%;margin-right:0px" id="container">
</div>
<!--Filter-->
<div class="col-md-2" style="width:30%;margin-left:0px">
<div ng-include='"templates/reports/filters.html"'></div>
</div>
</div>
$scope.showChartView = function() {
//should display charttemplate.html inside container
}
$scope.showTableView = function() {
//should display tabletemplate.html inside container
}
Need help in Angularjs to achieve something similar to show or hide a
template inside a container on button click.
how to load chart view by default?
just add hide/show in the button action?
can you give an example. I am new in Angularjs
1) Using ng-include, ng-click, ng-show, ng-hide
This works for me:
app.js:
var app = angular.module('myApp', []);
app.controller('MyCtrl', ['$scope', function ($scope) {
$scope.should_show_chart = true;
}]);
index.html:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS</title>
<meta charset="UTF-8"> <!-- For html5 (default is UTF-8) -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- For Bootstrap -->
<!-- Bootstrap CSS with glyphicon fonts in bootstrap/fonts/ -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-controller="MyCtrl" class="container">
<div>
<button type="button"
class="btn btn-default"
ng-click="should_show_chart=true">
<span class="glyphicon glyphicon-stats"
aria-hidden="true"></span>
</button>
<button type="button"
class="btn btn-default"
ng-click="should_show_chart=false">
<span class="glyphicon glyphicon-th-list"
aria-hidden="true"><span>
</button>
</div>
<div class="row">
<!--Chart or Table view-->
<div ng-include="'chart.html'" *****NOTE THE INTERIOR SINGLE QUOTES****
ng-show="should_show_chart" **ng-show explained below
class="col-md-6"
id="container">
</div>
<div ng-include="'table.html'" ****NOTE THE INTERIOR SINGLE QUOTES****
ng-hide="should_show_chart" ***ng-hide explained below
class="col-md-6"
id="container">
</div>
</div>
<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<!-- App Script -->
<script src="app.js"></script>
</body>
</html>
chart.html:
<h3>Chart</h3>
table.html:
<h3>Table</h3>
If ng-show is a true value, then the tag is made visible; if ng-hide is a true value, then the tag is hidden.
Note that according to the Bootstrap docs:
icon classes...should not be used along with other classes on the same
element. Instead, add a nested <span> and apply the icon classes to
the <span>.
And for accessibility reasons, you are supposed to add the attribute:
aria-hidden="true"
to the tag which specifies the glyphicon classes.
http://getbootstrap.com/components/
2) Using angular-ui-router
...which requires linking to an additional js script:
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.min.js"></script>
index.html:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS with UI-Router</title>
<meta charset="UTF-8"> <!-- For html5 (the default is UTF-8) -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- For Bootstrap -->
<!-- Bootstrap CSS with glyphicon fonts in bootstrap/fonts/ -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container">
<div>
<a class="btn btn-default"
ui-sref="chart" ***Adds an href attribute to the <a> tag consisting of '#' plus the url corresponding to the chart 'state'(see app.js).
ui-sref-active="active"> ***When the chart 'state' is activated, the specified class is added to the class attribute
<span class="glyphicon glyphicon-stats"
aria-hidden="true"></span>
</a>
<a class="btn btn-default"
ui-sref="table" ***Adds an href attribute to the <a> tag consisting of '#' plus the url corresponding to the table 'state'(see app.js)
ui-sref-active="active"> ***When the table 'state' is activated, then the specified class is added to the class attribute
<span class="glyphicon glyphicon-th-list"
aria-hidden="true"><span>
</a>
</div>
<!--Chart or Table view-->
<div ui-view></div> ***TEMPLATES ARE INSERTED HERE DEPENDING ON WHAT STATE IS ACTIVE****
<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<!-- Angular-UI-Router -->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.min.js"></script>
<!-- App Script -->
<script src="app.js"></script>
</body>
</html>
app.js:
var app = angular.module('myApp', ['ui.router']);
app.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
//Set the default route, which will load the associated state:
$urlRouterProvider.otherwise('/chart');
//Define the states:
$stateProvider
.state('chart', {
url: '/chart',
templateUrl: 'chart.html'
})
.state('table', {
url: '/table',
templateUrl: 'table.html'
});
}]);
3) Using ng-switch, ng-include (per xe4me's answer):
index.html:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS</title>
<meta charset="UTF-8"> <!-- For html5 (default is UTF-8) -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- For Bootstrap -->
<!-- Bootstrap CSS with glyphicon fonts in bootstrap/fonts/ -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container">
<div>
<button type="button"
class="btn btn-default"
ng-click="should_display='chart'">
<span class="glyphicon glyphicon-stats"
aria-hidden="true"></span>
</button>
<button type="button"
class="btn btn-default"
ng-click="should_display='table'">
<span class="glyphicon glyphicon-th-list"
aria-hidden="true"><span>
</button>
</div>
<div class="row">
<!--Chart or Table view-->
<div ng-switch="should_display">
<!-- should_display is only assigned a value after a button is clicked-->
<div ng-switch-default
ng-include="'chart.html'"
class="col-md-6"
id="container">
</div>
<div ng-switch-when="chart"
ng-include="'chart.html'"
class="col-md-6"
id="container">
</div>
<div ng-switch-when="table"
ng-include="'table.html'"
class="col-md-6"
id="container">
</div>
</div>
</div>
<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<!-- App Script -->
<script src="app.js"></script>
</body>
</html>
app.js:
var app = angular.module('myApp', []);
Instead of using a <div> with the ng-switch-default attribute to display a default view, you could use a controller to set the initial value of should_display. To do that, delete the <div> containing the ng-switch-default attribute, then add ng-controller="MyCtrl" to the <body> tag, and change app.js to this:
var app = angular.module('myApp', []);
app.controller('MyCtrl', ['$scope', function ($scope) {
$scope.should_display = 'chart';
}]);
Your best bet would be using the ng-include directive and putting currently used template URL into a scope variable.
<div ng-include="view"></div>
Changing displayed view is then done using a simple assignment
$scope.showChartView = function () {
$scope.view = '/path/to/chartView.fragment.html';
};
I think the best way of doing this is using ng-switch there you can use ng-include and change the content with one click.
you can check my answer here :
ng-switch
Is it possible to have a textbox and a button horizontally using JQuery Mobile?
using data-inline="true" works for buttons but not when mixed with button and textbox.
data inline example
data-type="horizontal" also didn't work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css"/>
<script type="text/javascript">
$(document).ready(function(){
$("#clearMeClearMe").click(function(){
//$(this).hide();
$("#clearMe22").val("");
});
});
</script>
<body>
<div data-role="page">
<div data-role="header">
<h1>Textbox Clear Demo</h1>
</div><!-- /header -->
<div id="content">
<input type="text" id="clearMe22" data-inline="true" name="clearMe22"/>
<a href="#" data-role="button" data-icon="delete"
data-iconpos="notext" id="clearMeClearMe">Clear</a>
</div>
</div><!-- /page -->
</body>
</html>
Seems to work best for me when I float the button right and restrict the width of the text input:
<span>
<input style="width:90%;display:inline-block" type="text" id="clearMe22" data-inline="true" name="clearMe22" />
<a style="float:right" href="#" class="ui-input-clear" data-role="button" data-icon="delete"
data-iconpos="notext" id="clearMeClearMe">Clear</a>
</span>
http://jsfiddle.net/xeyyr/1/
But someone else might be able to provide a more elegant CSS solution.
I'm trying to find a similar solution for a custom button, but in your case I believe you can use the built-in methods for data clear ('data-clear-btn'). You can find this documented here:
http://jquerymobile.com/demos/1.3.0-rc.1/docs/demos/widgets/textinputs/
and would look like:
<input data-clear-btn="true" name="text-3" id="text-3" value="" type="text">