I have one search box in one page i.e header.html file and the list on which i want to implement the search functionality is on another page i.e content.html. So how can i use angularjs search functionality in this case. Below is the html code.
header.html
<div class="input-group col-md-12 search-inner-page ">
<input type="text" class="form-control" placeholder="Search" name="q">
</div>
content.html
<div class="surveyList" ng-repeat="survey in allSurveys">
<span class="checkbox" ></span>
<div class="toogleSurvey row" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()">
<div class="col-xs-5 col-sm-2 col-md-2">{{survey.Name}}</div>
<div class="col-xs-5 col-sm-1 col-md-1">{{survey.Type}}</div>
<div class="col-sm-3 col-md-3 hidden-xs">{{survey.SurveyReference}}</div>
<div class="col-sm-3 col-md-3 hidden-xs">{{survey.CreatedDate}}</div>
<div class="col-sm-2 col-md-2 hidden-xs SurveyLastChild">{{survey.Status}}</div>
<div class="hidden-xs surveyListTool" ng-show="hoverEdit">
<a class="editSurvey" title="edit"></a>
<a class="deleteSurvey" title="delete"></a>
<a class="exportSurvey" title="export survey"></a>
<a class="menuSurvey" title="menu"></a>
</div>
</div>
contentCtrl.js
angular.module("adminsuite").controller("surveyController",['getAllSurveyService','AuthenticationService', '$scope','$rootScope', '$state', function(getAllSurveyService,AuthenticationService, $scope,$rootScope,$state){
getAllSurveyService.surveyList().then(
function( data ) {
$scope.allSurveys = data;
console.log($scope.allSurveys);
if($scope.allSurveys.ErrorMessage){
AuthenticationService.ClearCredentials();
$state.go('login');
}
}
);
}]);
headerController.js
angular.module("adminsuite").controller("headerController",['AuthenticationService','$rootScope','$cookieStore','$scope',function(AuthenticationService,$cookieStore,$scope,$rootScope){
$scope.header = "Header";
$scope.searchInSurvey = $scope.surveySearch;
$scope.logout = function(){
//$scope.dataLoading = true;
AuthenticationService.ClearCredentials();
console.log($cookieStore.get('globals'));
//$state.go('login');
};
}]);
On typing something in the search box of header.html as mentioned above, it should search the content in content.html page.
You could maybe use a ng-change on the input of header.html to update the allSurveys array.
Just add a ng-change and a ng-model to your input
<div class="input-group col-md-12 search-inner-page ">
<input ng-model="yourCtrl.searchInput" ng-change="yourCtrl.searchInputChanged" type="text" class="form-control" placeholder="Search" name="q">
</div>
In your controller you can add a function searchInputChanged that will filter the data based on searchInput using .filter().
You can set your list of Surveys in a variable into a $rootScope, and get its value from another controller, like this:
//Controller that contains the list
$rootScope.surveysList = [s1,s2,s3,...,sn];
After that, you can get this variable and set into the controller scope where your input is.
$scope.allSurveys = $rootScope.surveysList;
Your input should be like this:
<input ng-model="surveySearch" type="text" class="form-control" placeholder="Search" name="q">
And que query in your list template should be like this:
ng-repeat="survey in allSurveys | filter:surveySearch"
I hope it works for you
Thank You guys. I got the answer like this...
header.html
<div class="input-group col-md-12 search-inner-page">
<input type="text" class="form-control" placeholder="Search" name="q" ng-model="global.search">
<img src = "images/search.png" alt = "Generic placeholder thumbnail" >
</div>
content.html
<div class="surveyList" ng-repeat="survey in allSurveys | filter:global.search">
<span class="checkbox" ></span>
<div class="toogleSurvey row" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()">
<div class="col-xs-5 col-sm-2 col-md-2">{{survey.Name}}</div>
<div class="col-xs-5 col-sm-1 col-md-1">{{survey.Type}}</div>
<div class="col-sm-3 col-md-3 hidden-xs">{{survey.SurveyReference}}</div>
<div class="col-sm-3 col-md-3 hidden-xs">{{survey.CreatedDate}}</div>
<div class="col-sm-2 col-md-2 hidden-xs SurveyLastChild">{{survey.Status}}</div>
<div class="hidden-xs surveyListTool" ng-show="hoverEdit">
<a class="editSurvey" title="edit"></a>
<a class="deleteSurvey" title="delete"></a>
<a class="exportSurvey" title="export survey"></a>
<a class="menuSurvey" title="menu"></a>
</div>
headerCtrl.js
$rootScope.global = {
search: ''
};
Related
Im using angular 1 for the data binding from the form to the next view using the routing module to display the html structure form the different files, it i have all the html code in one file the prototype works perfect, but when i use the routing module the data is not binding through the links,
In the following link im using only css for the transitions so all the html is in one file and not using the routing module and there it works http://jspmultimedia.com/angular-cv-css/#form
and in the next link is where is not working using the routing module
to pass the data from the form to be displayed in the next view.
http://jspmultimedia.com/angular-cv-route/#!/form
var app = angular.module("myApp", ["ngRoute"]);
//Routing for display and URLS
app.config(function($routeProvider) {
$routeProvider
.when("/", {
controller : 'myCtrl',
templateUrl : 'dashboard.htm'
})
.when("/form", {
controller : 'myCtrl',
templateUrl : 'form.htm'
})
.when("/result", {
controller : 'myCtrl',
templateUrl : 'resultdashboard.htm'
})
.otherwise({ redirectTo: 'dashboard.htm'});
});
//scope for select list (position)
app.controller('myCtrl', function($scope) {
$scope.position = [
"Front-end Web Developer",
"Back-end Web Developer",
"UI / UE Designer"
]
//add skills
$scope.skills = [];
$scope.addItem = function () {
$scope.skills.push($scope.addMe);
}
//remove skills
$scope.removeItem = function (x) {
$scope.skills.splice(x, 1);
}
});
this is the form.htm
<!-- FORM -->
<form id="form">
<div class="form-group row"><!-- Name -->
<label for="lgFormGroupInput" class="col-2 col-form-label col-form-label-lg">First Name(s)</label>
<div class="col-10">
<input type="text" ng-model="name" class="form-control form-control-lg" id="lgFormGroupInput" placeholder="John" value="Javier Smith Paterson">
</div>
</div>
<div class="form-group row"><!-- Last Name -->
<label for="lgFormGroupInput" class="col-2 col-form-label col-form-label-lg">Last Name(s)</label>
<div class="col-10">
<input type="text" ng-model="lastName" class="form-control form-control-lg" id="lgFormGroupInput" placeholder="Smith Paterson" value="Javier Smith Paterson">
</div>
</div>
<div class="form-group row"><!-- Short Description -->
<label for="lgFormGroupInput" class="col-2 col-form-label col-form-label-lg">Cover Letter</label>
<div class="col-10">
<textarea ng-model="shortDescription" class="form-control" id="exampleTextarea" rows="3" placeholder="A Short description of what you can ofer"></textarea>
</div>
</div>
<div class="form-group row"><!-- select Position to apply -->
<label for="lgFormGroupInput" class="col-2 col-form-label col-form-label-lg">Position to Apply</label>
<div class="col-10">
<select ng-model="selectedPosition" class="form-control form-control-lg">
<option value="" selected disabled hidden>Choose here</option>
<option ng-repeat="x in position" value="{{x}}">{{x}}</option>
</select>
</div>
</div>
<div class="form-group row"><!-- add skills -->
<label for="lgFormGroupInput" class="col-2 col-form-label col-form-label-lg">Main Skills</label>
<div class="col-4">
<ul>
<li ng-repeat="x in skills" class="col-1">{{x}}<div class="col-1">
<span ng-click="removeItem($index)" style="cursor:pointer;">×</span>
</div>
</li>
</ul>
<input class="form-control" ng-model="addMe">
<button ng-click="addItem()" class="btn btn-primary">Add</button>
</div>
<div class="clearfix">
</div>
<div class="image-upload"> <!-- Image Upload preview -->
<input type="file" class="form-control-file" onchange="readURL(this);" />
<img id="preview-img" src="http://placehold.it/180" alt="your image" />
</div>
</div>
<!-- FINISH CTA-->
Finish
</form>
and at last the resultdashboard.htm
<!-- Result dashboard CV -->
<div id="resultDashboard">
<div class="row col-12">
<div class="col-3">
<img src="http://placehold.it/18" class="rounded-circle" id="resDashImg" alt="photo image of {{name + " " + lastName}}" title="{{name + " "+ lastName}}">
</div>
<div class="col-6">
<h1>{{ name + " " +lastName}}</h1>
<p>{{shortDescription}}</p>
<div class="text-center d-flex"><p>Applying for: </p><h3 class="ml-3">{{selectedPosition}}</h3></div>
</div>
<div class="col-3">
<h3>Main Skills</h3>
<ul>
<li ng-repeat="x in skills"> {{x}}
</li>
</ul>
</div>
</div>
</div>
i'm assuming i must be missing something with the controller if anyone can take a quick look please i would really appreciate it, the prototype is suppose to be a CV upload just to learn how to use angular 1 and then go ahead with other libraries, i think understanding the routing is a big step for me. anyways thank you.
Add the controller in your HTML - like ng-controller="myCtrl"
How do I add a checkbox to a widget in AngularJS?
I have a widget displayed on one of my webpages- the widget currently displays a couple of alarms whenever the alarms are raised (i.e. it's watching the value of a couple of variables- when those variables reach a certain value, the alarms are raised, and displayed on the widget).
What I want to do now, is add a checkbox to the widget, to toggle whether or not the alarms should be displayed on the widget. The HTML for the widget is:
<div data-ng-if="widget.name === 'umw-tag-box'">
<div class="divider"></div>
<div class="row">
<div class="form-horizontal">
<label class="col-sm-4 control-label-left" data-i18n="Tag:"></label>
<div class="col-sm-8">
<tags-input max-tags="1"
min-length="1"
key-property="tag"
display-property="tag"
template="tagItem.html"
um-max-tags-strict="true"
data-ng-model="widget.tag"
placeholder="Start typing a tag name"
replace-spaces-with-dashes="false"
on-tag-adding="onAddingTagItem($tag)"
on-tag-added="warning.tag = undefined"
um-tags-input-warning="{{warning.tag}}"
data-ng-class="{'hide-tags-input': widget.tag.length > 0}">
<auto-complete min-length="1"
load-on-focus="true"
load-on-empty="true"
display-property="tag"
template="autocomplete.html"
source="autocompleteTagsFilter($query)">
</auto-complete>
</tags-input>
</div>
</div>
</div>
<div class="divider"></div>
<div class="row">
<div class="form-horizontal">
<label class="col-sm-4 control-label-left" data-i18n="Background color:"></label>
<div class="col-sm-8">
<um-color-picker color="widget.color"></um-color-picker>
</div>
</div>
</div>
<div class="divider"></div>
<div class="row">
<div class="form-horizontal">
<label class="col-sm-4 control-label-left" data-i18n="Background icon:"></label>
<div class="col-sm-8 ">
<um-icon-picker icon="widget.icon"></um-icon-picker>
</div>
</div>
</div>
<div class="divider"></div>
<div class="row ui-checkbox-row">
<label class="col-sm-4 col-xs-6" data-i18n="Flip:"></label>
<div class="col-sm-8 col-xs-6">
<label class="ui-checkbox">
<input type="checkbox" ng-model="widget.flip">
<span></span>
</label>
</div>
</div>
<div class="divider"></div>
<div class="row" ul-scroll-modal-to-me="focusDesc">
<div class="form-horizontal">
<label class="col-sm-4 control-label-left" data-i18n="Description:"></label>
<div class="col-sm-8">
<input type="text" class="form-control input-sm" ng-model="widget.description"
data-ng-focus="focusDesc = true" data-ng-blur="focusDesc = false">
</div>
</div>
</div>
</div>
Inside the widget HTML, there is already what appears to be markup for a checkbox, though I can't actually see that on the page anywhere...
<div class="row ui-checkbox-row">
I tried adding a similar line inside the umw-tag-box div, and inside the divs a couple of levels below that, but couldn't get the checkbox to appear no matter where I placed it...
What is the best way to add a checkbox to the widget?
Edit
I tried adding a function inside the link function in the JS that would add/ display the checkbox on the page, but this doesn't seem to have made a difference to what's displayed in the browser:
.directive('umwTagBox', function($timeout, fxTag, umColorFilter){
return {
...
template: ...
...
link: function($scope, $element){
...
var setTagValue = function(tag){
...
//This is the code I added:
angular.module('showAlarmsCheckbox', [])
.controller('alarmsController', ['$scope', function($scope){
$scope.checkBoxMode1 = {
value1 : true,
value2 : 'YES'
};
}]);
...
};
...
}
}
})
Is there something I'm missing here/ something I'm doing wrong?
I add a form using AJAX in a Php page now I add anther form within that form which is created using AJAX but it is not working.
This is the parent page.
<div class="col-xs-12 mg-top-30 text-left" id="studentstatus">
<div class="col-sm-1 hidden-xs"></div>
<div class="col-sm-2">
<label for="" class="control-label">Are you a?</label>
</div>
<div class="col-sm-5">
<label class="radio-inline">
<input type="radio" name="studentstatus" value="fresh">Freshman</label>
<label class="radio-inline mg-top-5">
<input type="radio" name="studentstatus" value="compart">Reappeared</label>
</div>
</div>
<div id="adddata"></div>`
JQuery to working with AJAX is the following for adding First form:
$(function () {
$('#studentstatus input:radio').change(
function () {
var index = this.value;
$.get(
"add_freshman_form_in_maprevios.php", {
studentstatus: index
},
function (data) {
$("#adddata").html(data);
}
);
}
);
});
add_freshman_form_in_maprevios.php page HTML code is:
$output='<div class="col-xs-12 mg-top-10 text-left">
<div class="col-sm-1 hidden-xs"></div>
<div class="col-sm-2">
<label for="" class="control-label">Roll No.</label>
</div>
<div class="col-sm-2">
<input type="number" class="btn-block input-sm" placeholder="Previous roll no.">
</div>
</div>
<div class="col-xs-12 mg-top-10 text-left">
<div class="col-sm-1 hidden-xs"></div>
<div class="col-sm-3">
<label for="" class="control-label">Write down the names of failed papers:</label>
</div>
</div>
<div class="col-xs-12 mg-top-10 text-left">
<div class="col-sm-1 hidden-xs"></div>
<div class="col-sm-2">
<input type="text" class="btn-block input-sm" placeholder="Failed Paper name...">
</div>
</div>
<div class="col-xs-12 text-left">
<div class="col-sm-1 hidden-xs"></div>
<button class="mg-left-15 color addanother"> <i class="fa fa-plus-circle " > <label for="">Add another</label></i></button>
<div id="compartpaper"></div>
</div>';
echo $output;
It is working very well but when I want another textbox in this form using AJAX than it is not working. I write JQuery code for this purpose into the main page.
$('.addanother').click(function (e) {
e.preventDefault();
$.get(
"add_compart_form_in_previous_paper.php", {
username: $("#username").val()
},
function (data) {
$("#compartpaper").append(data);
}
);
});
The Form which I want to add in this page is mean :
<?php
$output='<div class="col-sm-2">
<input type="text" class="btn-block input-sm" placeholder="Failed Paper name...">
</div>';
echo $output;
?>
You're referring to an element that does not exist when the page is loaded , it is why not enter on the click event. Try this instead.
$("#adddata").on("click", ".addanother", function(){
//your code
});
I have a binding problem with one of my directives that is causing me problems. Usually I don't have problems with binding but I can't see the bug. I have this directive:
radioMenuDirective.js
(function () {
"use strict";
var myAppModule = angular.module('myApp');
myAppModule.directive('radioMenuAllocateSection', function () {
return {
templateUrl: 'Scripts/app/shared/radiomenu/tmplAllocateSection.html',
restrict: 'E',
scope: {
allocatedTo: '='
},
controller: [
'$scope', 'genericService', function ($scope, genericService) {
$scope.radio = {
name: 'department'
};
}
],
}
});
})();
tmplAllocateSection.html
<label>Allocate Section To:</label>
<br/>
<form name="myForm" ng-controller="ExampleController" class="form-inline">
<div class="form-group">
<label>
<input type="radio" ng-model="radio.name" value="department">
Department
</label>
<label>
<input type="radio" ng-model="radio.name" value="user">
User
</label>
<div ng-if="radio.name == 'department'">
{{allocatedTo}}
<department-dropdown department="allocatedTo"></department-dropdown>
</div>
<div ng-if="radio.name == 'user'">
{{allocatedTo}}
<user-dropdown user="allocatedTo"></user-dropdown>
</div>
</div>
</form>
I can see the scope variable within my directive with
{{allocatedTo}}
However above this directive is another 1
tmplSectionCategories.html
<form role="form" name="frmContactDetails">
the enquiry data: {{enquiryData.selectedPersonOrDep}}
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Section Categories:</h3>
</div>
<h6>
<div class="panel-body">
<div class="form-group col-md-6 ignore-left-padding">
<subject-topic-dropdown selected-subject="enquiryData.subject" selected-topic="enquiryData.topic"></subject-topic-dropdown>
<keywords-dropdown selected-subject="enquiryData.subject"></keywords-dropdown>
<div class="form-group col-md-12 ignore-left-padding">
<genus-dropdown selected-genus="enquiryData.genus"></genus-dropdown>
</div>
<plant-names-dropdown selected-plant="enquiryData.plant"></plant-names-dropdown>
</div>
<div class="form-group col-md-6 ignore-left-padding">
<department-keyword-dropdown selected-department="enquiryData.department" selected-keyword="enquiryData.keyword"></department-keyword-dropdown>
<div class="form-group col-md-12 ignore-left-padding">
<label class="col-md-12 control-label ignore-left-padding">Quantity:</label>
<div class="col-md-8 ignore-left-padding">
<div class="col-md-2 ignore-left-padding">
<input type="number" ng-model="enquiryData.quantity" class="form-control input-sm" style="width: 50px" min="0" />
</div>
</div>
</div>
<radio-menu-allocate-section allocated-to="enquiryData.selectedPersonOrDep"></radio-menu-allocate-section>
</div>
</div>
</h6>
</div>
</div>
</form>
Directive declared on page
<radio-menu-allocate-section allocated-to="enquiryData.selectedPersonOrDep"></radio-menu-allocate-section>
</div>
{{enquiryData.selectedPersonOrDep}}
This doesn't show anything when the dropdown changes, so I have a problem where I don't have the value after selecting a value. I need it above for a button click handler.
With my current code I am able to clone entire div. But if the user attach any documents then the user click add more button the data are remain same on the cloned div.
This is the code I have so far below that isn't working. You can also see this on js fiddle: Link
I have try with the following code `$(".custom-file-input").closest('form').trigger('reset'); But this was resetting the original div not the clone one. Some where I am lagging kindly please help me.
var count=0;
$(document).on("click", ".attch_add_button", function () {
var $clone = $('.cloned-row4:eq(0)').clone();
$clone.find('[id]').each(function(){this.id+=''});
$clone.find('.btn_more').after("<input type='button' class='btn_right btn_less1' id='buttonless'/>")
$clone.attr('id', "added"+(++count));
$clone.find('.preview').hide();
$clone.wrap('<form>');
$clone.closest('form').trigger('reset');
$clone.unwrap();
$(this).parents('.medica_rpt').after($clone);
});
$(document).on('click', ".btn_less1", function (){
var len = $('.cloned-row4').length;
if(len>1){
$(this).closest(".btn_less1").parents('.medica_rpt').remove();
}
});
Here is the html code
<div class="medica_rpt cloned-row4" >
<div class="row">
<div class="col-xs-4 col-sm-3 col-md-3 col-lg-3">
</div>
<div class="col-xs-2 col-sm-1 col-md-2 col-lg-2 ctm_lft_mrpt">
<label class="lbl_accep">Accepted ?</label>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 ctm_lft_mrpt">
<label class="lbl_accep">Accepted by</label>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 ctm_lft_mrpt">
<label class="lbl_accep">Accepted on</label>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 ctm_lft_mrpt">
<label class="lbl_accepft">Document Remarks</label>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-3 col-md-3 col-lg-3">
<div class="custom-file-input" id="custom-file-input">
<input type="file" class="check">
<input type="text" class="txt_field ctm_widt check" id="file_name" disabled placeholder="Attached File">
<button class="cst_select ">
<i class="fa fa-rotate-90">
</i> Attach
</button>
</div>
View
</div>
<div class="col-xs-2 col-sm-1 col-md-2 col-lg-2 ctm_lft_mrpt">
<input type="checkbox">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 ctm_lft_mrpt">
<input type="text" class="smipt_Field" id="accpt_by" name="accpt_by" disabled/>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 ctm_lft_mrpt">
<input type="text" class="smipt_Field" id="accpt_on" name="accpt_on" disabled/>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 ctm_lft_mrpt">
<select class="slt_Field" id="txt_dcmRem" name="txt_dcmRem">
<option value="" selected='selected'> </option>
<option value="COLR">Coloured Copy Required</option>
<option value="EXPR">Expired Document</option>
<option value="INSF">Insufficient</option>
<option value="INVD">Invalid Document</option>
<option value="LOWR">Low Resolution</option>
</select>
</div>
</div>
<div class="row-fluid">
<div class="col-xs-12 col-sm-12 col-md-12 pull-right clear">
<input type="button" class="btn_more btn_right attch_add_button"/>
<!--<button class="btn_more btn_right attch_add_button"></button>-->
</div>
</div>
</div>
Thanks in advance
Kindly help suggest me I am confused here.
If you are cloning form elements best work around for this is to reset the cloned form.
In the fiddle example there is no form at all, so, in case you are cloning some input fields but not the whole form you might need to wrap those input inside a form, reset that form, and then unwrap.
Your JS should end up similar to this:
$(document).on("click", ".attch_add_button", function () {
var $clone = $('.cloned-row4:eq(0)').clone();
$clone.find('[id]').each(function(){this.id+=''});
$clone.find('.btn_more').after("<input type='button' class='btn_right btn_less1' id='buttonless'/>")
$clone.attr('id', "added"+(++count));
$clone.find('#custom-file-input').val('');
$clone.wrap('<form>');
$clone.closest('form').reset();
$clone.unwrap();
$(this).parents('.medica_rpt').after($clone);
});
You might want to check slipheed's answer on THIS question