I wish to set the value of my dropdown and the value of my textbox in ng-model to pass it to my angular js.
The console displays null for the value of my dropdown.
What I've tried:
<form id="uploadForm">
<div id="republishSingle" class="panel-collapse collapse in desc vertical" style="text-align: left">
<div class="horizontal">
<div class="dropdown">
<button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown" id="selectSource1" aria-haspopup="true" aria-expanded="true" ng-model="republishSource">
Source system
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<h5 class="dropdown-header">Source system</h5>
<a class="dropdown-item" href="#" data-value="s1">S1</a>
<a class="dropdown-item" href="#" data-value="s2">S2</a>
</div>
</div>
<div class="col-5">
<input class="form-control disableButton" id="policy" type="text" placeholder="Policy" ng-model="republishInput"/>
</div>
<div class="form-group mb-3">
<div class="form-group" aria-label="file upload">
<input id="republish" type="submit" class="btn btn-success"
ng-click="doRepublish(republishSource,republishInput)" value="Republish"/>
</div>
</div>
</div>
</div>
</form>
Related
I am facing problem below upon using the ng-inculde in angularJS. The bootstrap burger icon is not working. But if i'm not using the ng-include it works perfectly fine. Did I do something wrong?.
Is there any set-up first that I need to do before using the ng-include?.
Main html
...
<body>
<ng-include src="'../Content/Shared/Header.html'"></ng-include>
<ng-view></ng-view>
</body>
....
Include html
<header>
<div class="container">
<div class="row element-holder">
<div class="col-md-2 col-sm-4 col-12">
<a href="../main/index.html" class="text-logo-holder">
<span class="text">My Project</span>
</a>
</div>
<div class="col-md-4 col-sm-6 col-12">
<form ng-submit="searchProducts()" class="search-holder">
<input type="text" class="form-control" placeholder="Search Collection...." list="_items" ng-model="searchText" ng-keyup="searchItemNames()" autocomplete="off" />
<datalist id="_items">
<option ng-repeat="result in results" value="{{result}}">{{result}}</option>
</datalist>
<button type="submit" class="btn btn-primary"><i class="fas fa-search"></i></button>
</form>
</div>
<div class="col-md-6 col-sm-2 col-12">
<nav class="navbar navbar-expand-lg float-right">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<img src="../Content/dist/images/icon-header-menu.png" />
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Discover</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
<li class="nav-item btn-nav-item">
<a class="nav-link" href="" ng-click="logout()" ng-show="isSignedIn">Logout</a>
<a class="nav-link" href="" ng-click="signin()" ng-show="!isSignedIn">Sign In</a>
</li>
<li class="nav-item">
<a id="menu-link" class="nav-link" href="#">
<img src="../Content/dist/images/icon-header-menu.png" />
</a>
</li>
</ul>
</div>
</nav>
<div class="mobile-nav float-right">
<a id="menu-link-mobile" class="nav-link" href="#">
<img src="../Content/dist/images/icon-header-menu.png" />
</a>
</div>
</div>
</div>
</div>
<div id="sidebar-menu" class="side-menu-content">
<ul class="menu-holder">
<li>
<a href="#" class="menu-item row">
<div class="col-3 icon-holder">
<img src="../Content/dist/images/icon-inbox.png" />
</div>
<div class="col-9">
Inbox
</div>
</a>
</li>
<li>
<a href="#" class="menu-item row">
<div class="col-3 icon-holder">
<img src="../Content/dist/images/icon-purchase.png" />
</div>
<div class="col-9">
Purchases
</div>
</a>
</li>
</ul>
<div class="button-holder row">
<div class="col-6 pl-default pr-default" ng-show="!isSignedIn">
<input type="submit" class="btn btn-primary" value="Login/Sign Up" ng-click="signin()" />
</div>
<div class="col-6 pl-default pr-default" ng-show="isSignedIn">
<input type="submit" class="btn btn-secondary" value="Logout" ng-click="logout()" />
</div>
<div class="col-6 pl-default pr-default">
<input type="submit" class="btn btn-primary" value="Change Password" />
</div>
</div>
</div>
ng-include will:
Fetches, compiles and includes an external HTML fragment.
So that fragment added after page load and your events bind with js will not work on these dynamically added elements. To solve it, you can bind these events with onload arguments which is expression to evaluate when a new partial is loaded. Or you can try attach event to dynamic elements in javascript
Please, remove the single quote.
<div ng-include="../Content/Shared/Header.html"></div>
It seems to be a tag closing issue.
You need to close the <header> tag at the end of Header.html
use this :
<div ng-include src="'../Content/Shared/Header.html'"></div>
when i click on Deploy button it's upload both environment list, and category list Instead it opening both lists it should open just the environment list, then open the category list once an environment has been selected.
<div class="download-options">
<form class="form-inline" role="form">
<div class="dropdown" id="download-target-environment-dropdown" ng-show="!comparisonDeployment">
<label class="control-label">Target Environment:</label>
<input type="text" class="form-control dropdown-toggle" data-toggle="dropdown" role="button" data-target="#"
value="{{targetEnvironment.alias}}" readonly>
<ul class="dropdown-menu" role="menu" ng-class="{show: !targetEnvironment}">
<li ng-repeat="env in environments">
<a ng-click="setTargetEnvironment(env)">{{env.alias}}</a>
</li>
</ul>
</div>
<div class="dropdown" id="download-data-type-dropdown">
<label class="control-label">Categorie`enter code here`s:</label>
<input id="add_a_category" type="text" class="form-control dropdown-toggle" data-toggle="dropdown" role="button"
data-target="#"
value="Add a category" readonly/>
<ul class="dropdown-menu" role="menu" ng-class="{show: !type}">
<li ng-repeat="type in typesInfo" ng-class="{disabled: !hasRootFromType(type)}">
<a ng-click="setType(type)">{{type.alias}}</a>
</li>
</ul>
</div>
</form>
</div>
I have a Json which m getting in $scope.notifications.
**Json**
0:{
$$hashKey: "object:31"
action: "wrote a comment"
creationDate: "2015-11-23 13:48:55.0"
post: Object
seen: true
user: Object
}
This Json has a key : seen which can be either true or false . I have to filter out those objects in ng-repeat whose key :seen is= false on clicking button unread notifications.
and then again clear the filter on clicking All Notifications button.
HTML
<div class="col-xs-12 col-sm-6 col-md-8">
<ul class="notifications-action-menu text-center">
<li>
<button type="button" class="btn btn-link btnUnreadFilter active" data-filter="all" id="btnShowAll">All Notifications</button>
</li>
<li>
<button type="button" class="btn btn-link btnUnreadFilter" data-filter="unread" id="btnShowOnlyUnread" ng-click="actions.unreadNotifications()">Unread Notifications</button>
</li>
<ul></ul>
</ul>
</div>
<div class="col-xs-12">
<div id="notificationsListWrapper" ng-repeat="notification in notifications" ng-hide="{{notification.seen == seen}}">
<div class="notification-item" ng-class="{'read' : notification.seen == true}">
<div class=" no-click-bind mark-as-read-btn">
<button type="button" class="no-click-bind" data-toggle="tooltip" data-placement="top" data-original-title="Mark as read" ng-click="actions.redirectToPost(notification.post.uuid, $index)">
<i class="fa fa-check"></i>
</button>
</div>
<div class="notification-body">
<div class="notification-details">
<a href="" class="doc-profile-img"><img class="" alt="{{notification.user.authorName}}" ng-src="{{(notification.user.thumbnailUrl) ? notification.user.thumbnailUrl :'/assets/images/avatars/avatar_100x100.png'}}">
</a>
<a>{{notification.user.authorName}}</a><span class="notification-action"> {{notification.action}}</span>
<a href="/news/abcd" class="notification-url no-click-bind">{{notification.post.title}}
</a>
<div class="notification-meta"><i class="fa notification-type-icon fa-calendar"></i> <small class="notification-datetime text-muted" title="Thursday, January 21, 2016 at 5:26 pm">Jan 21 2016</small>
</div>
<div class="notification-actions"></div>
</div>
</div>
<div ng-if="notification.post.featuredAttachmentUrl != '' " class="notification-url-img"><img alt="" ng-src="{{notification.post.featuredAttachmentUrl}}"></div>
</div>
</div>
Try something like:
ng-repeat="notification in notifications | filter:seenFilter"
where seenFilter is set to {seen:true}, {seen:false} or true by the controller. Example:
$scope.actions.unreadNotifications = function(){
$scope.seenFilter = {seen:false}
}
I'm creating a social network site using AngularJS with bootstrap, the site is almost done but dropdown does NOT work.
I have tried many solutions online but none of them seem to work.
"ui.router" and "ui.bootstrap" are in my app.js so that is not the problem
HTML:
<div role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
{{ settings.sitename }}
</div>
<div class="navbar-collapse collapse">
<form role="search" class="navbar-form navbar-right" ng-if="isSignupPage">
<div class="form-group">
{{ 'already_registered' | translate }}
</div>
<a class="btn btn-default" ui-sref="login">{{ 'login_action' | translate }}</a>
</form>
<form role="search" class="navbar-form navbar-right" ng-if="isLoginPage">
<div class="form-group">
{{ 'no_account_signup' | translate }}
</div>
<a class="btn btn-success" ui-sref="signup">{{ 'signup_action' | translate }}</a>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
I'm using angular 1.4.0
You forgot about dropdown directive. Angular bootstrap documentation says: Dropdown is a simple directive which will toggle a dropdown menu on click or programmatically.
<div class="btn-group" dropdown is-open="status.isopen">
<button id="single-button" type="button" class="btn btn-primary" dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link</li>
</ul>
</div>
So related to your code.
<div role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
{{ settings.sitename }}
</div>
<div class="navbar-collapse collapse">
<div class="btn-group" dropdown is-open="status.isopen">
<button id="single-button" type="button" class="btn btn-primary" dropdown-toggle ng-disabled="disabled">
Button dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem">
<a href="#">
<form role="search" class="navbar-form navbar-right" ng-if="isSignupPage">
<div class="form-group">
{{ 'already_registered' | translate }}
</div>
<a class="btn btn-default" ui-sref="login">{{ 'login_action' | translate }}</a>
</form>
</a>
</li>
<li role="menuitem">
<a href="#">
<form role="search" class="navbar-form navbar-right" ng-if="isLoginPage">
<div class="form-group">
{{ 'no_account_signup' | translate }}
</div>
<a class="btn btn-success" ui-sref="signup">{{ 'signup_action' | translate }}</a>
</form>
</a>
</li>
</ul>
</div>
</div>
<!--/.nav-collapse -->
</div>
</div>
Problem Description:
I have an e-commerce application, in which I have to load a lot of product images. We used 200*200 images for small images, but there are modals which are 600*600 in size and appear when clicked on any product.
The problem is, when each page is loaded, all the images (200*200 and 600*600) are getting loaded, which is making the application too slow.
Question: Is there any way to avoid the (600*600) images to load before being clicked. I would like the application to load only the 200*200 images initially and load any 600*600 image on request.
Technology: (Jade, Angularjs, Nodejs)
Code:
<div ng-repeat="product in category.products | filter:query | orderBy: 'productName'">
<div class="panel-default panel thumbnail" id="imgs">
<div class="panel-body">
<a href="#" data-target="#img_modal{{product._id}}" data-toggle="modal">
<img class="img-responsive center-block" ng-src="{{product.productImage_tn}}" alt="" id="items" />
</a>
<div class="modal" id='img_modal{{product._id}}' tabindex='-1' role='dialog' area-hidden='true'>
<div class="modal-dialog" style="width: 630px;">
<div class="modal-content">
<div class="modal-header">
<h4>{{ product.productName }}
<button class="close" type='button' data-dismiss='modal' area-hidden='true'> ×</button>
</h4>
</div>
<div class="modal-body">
<img ng-src="{{product.productImage_600}}" style=" position: relative; height: 400px;" class="img-responsive center-block">
</div>
<div class="modal-footer">
<div class="row">
<div class="col-sm-4 col-md-4">
<h4>$ {{ product.productPrice }} {{ product.productUnit }}</h4>
</div>
<div class="col-sm-2 col-md-2"></div>
<div class="col-sm-6 col-md-6">
<div class="input-group number-spinner">
<span class="input-group-btn">
<button class="btn btn-default" ng-click="removeItem(product._id)">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<label class="form-control text-center">{{ getItemQty(product._id) }}</label>
<span class="input-group-btn">
<button class="btn btn-default" ng-click="addItem(product._id)">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-footer" id="panelfooter">
<h6>{{ product.productName }} </h6>
<h6>$ {{ product.productPrice }} {{ product.productUnit }}</h6>
</div>
<div class="input-group number-spinner">
<span class="input-group-btn">
<button class="btn btn-default" ng-click="removeItem(product._id)">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<label class="form-control text-center">{{ getItemQty(product._id) }}</label>
<span class="input-group-btn">
<button class="btn btn-default" ng-click="addItem(product._id)">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
</div>
Look at ui-bootstrap and the example for Modal over there. The reason you see all images being loaded is that you have inlined all your content. What you should do is put the modal content in a separate template and use the ng-click directive to open the modal dialog. Using the templateUrl option will ensure that content is loaded when clicked and not before