I have to place a input box for search in custom dropdown for filtering the countries, but for the searching first time it is working fine (i.e; if I type 'ind', I have two countries with ind and I am able to click on that countries and select, but when I again edit the search box for another list of countries, the ng-click is not working and I am unable to select the item from list).
Html:
<div class="predtoptn" id="dvCountryLstdopn">
<input type="text" class="form-control frmsrch" ng-model="somvar.countryName" placeholder="Search Items"/>
<ul class="predtsct">
<li class="prfdwn" ng-repeat="countriesLst in ctrylst| filter:somvar:strict" ng-click="countryIdFunc(countriesLst.countryId,countriesLst.countryName)">{{countriesLst.countryName}}</li>
</ul>
</div>
JavaScript:
vm.countryIdFunc = function (Id, txt) { vm.cntryId = Id; vm.cntryIdTxt = txt; }
Can you try like the below in your template,
<li class="prfdwn" ng-repeat="countriesLst in ctrylst| filter:somvar:strict">
<span ng-click="countryIdFunc(countriesLst.countryId,countriesLst.countryName)">
{{countriesLst.countryName}}
</span>
</li>
Related
I would like to implement a search functionality, but not the entire site search. Instead, search contents based on the node id .
for example the below is search code
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
<form action="/intranetsearchresult/" method="GET">
<input type="text" class="searchfield" placeholder="" name="query">
<button class="searchbtn btn btn-default btn-sm">Search</button>
</form>
#{
var searchQuery = Request.QueryString["query"];
if (!string.IsNullOrEmpty(searchQuery))
{
<div class="searchresults">
<p class="intro-para">Your search results for <strong>"#searchQuery"</strong></p>
<ul>
#foreach (var result in Umbraco.Search(searchQuery))
{
if(!#result.SearchResultsHide){
<li>
<a class="heading1 inline-link" href="#result.Url">#result.Name</a>
<div class="heading2">Created Date : #result.CreateDate.ToLongDateString()</div>
<div class="heading2">Updated Date : #result.updateDate.ToLongDateString()</div>
</li>
}
}
</ul>
</div>
}
}
from the above Umbraco.Search(searchQuery) this will search the entire website inside content.
Is there any way that I can search like this
Umbraco.Search(searchQuery , "Nodeid")
for example
Umbraco.Search("home loans, "1011")
like this?
I have this code:
<input id="ville" placeholder="Enter a city">
<ul class="suggestions">
<li data-vicopo="#ville">
<strong data-vicopo-code-postal></strong>
<span data-vicopo-ville></span>
</li>
</ul>
<script src="https://vicopo.selfbuild.fr/api.js"></script>
$(document).on('click', '.suggestions li', function () {
$('#ville').val(
$(this).find('[data-vicopo-code-postal]').text()
);
});
When I click on my chosen city, the list of suggested cities do not disapear. What easy fix can I do so that when clicking, the display of suggestions close or hide?
Thanks
Insert the below code to always show the suggestions list after you have hidden with .hide().
The user can click back into the input field and start typing which will then show the list again, or by clicking on it.
$('#ville').on('click keyup', function() {
$('.suggestions').show();
})
In my node app using express I have a view function that creates a list of inactive companies, each company has two submit input types "Active" and "Delete". I would like to be able to hit submit and have that individual ul become hidden. However, I'm not quite sure how to iterate over individually. Every time I've tried I end up hiding all the elements. Here's my view function:
function inactiveFiltered(companyObject) {
return `
<ul class="companyinfo">
<li class="list-info">${companyObject.company_type}</li>
<li class="list-info">${companyObject.company_name}</li>
<li class="list-info">${companyObject.company_location}</li>
<li class="list-info">${companyObject.company_phone}</li>
<br>
<li class="list-buttons">
<form action="/activeList" method="POST" class="myform">
<input type="hidden" name="companyId" value="${companyObject.id}">
<input type="submit" value="Active">
</form>
<form action="/deletecompany" method="POST">
<input type="hidden" name="companyId" value="${companyObject.id}">
<input type="submit" value="Delete">
</form>
</li>
<br>
</ul>
`
}
function inactiveList(arrayOfCompanies){
const companyItems = arrayOfCompanies.map(inactiveFiltered).join('');
return `
<div class="list inactive-list">
${companyItems}
</div>
`
}
module.exports = inactiveList;
One function takes an array of companies and then creates an company object. Now here's the latest JQuery attempt, but like I said it hides all the ul elements:
$(document.body).submit(function() {
$('.companyinfo').each(function(i) {
$(this).hide();
})
})
I've been stuck on this for waaay too long and would love any help whatsoever. Thank you!
You are hiding all elements at the same time because the selector .companyinfo returns a list of all elements using the class companyinfo which are all companies in your case. That's why they get hidden all at the same time
One way to achieve your goal is to add ids to the ul elements to be able to address them for each company individually like so: <ul id="companyinfo_${companyObject.company_name}" class="companyinfo">.
Then add a method hideCompany() to replace the $(document.body).submit(function() part:
function hideCompany(companyname) {
$('#companyinfo_' + companyname).hide();
}
Finally, modify <input type="submit" value="Delete">to read <input type="submit" value="Delete" onclick="hideCompany('${companyObject.company_name}')">.
I'm trying to make some textboxes appear everytime a user clicks a button.
i'm doing this with ngFor.
For some reason, the ngFor won't iterate.
I've tried using slice to change the array reference, but still, the text boxes won't appear.
Any idea what i'm doing wrong??
Below are the HTML and component codes.
Thanks!!!
export class semesterComponent {
subjectsNames = [];
addSubject(subjectName: string) {
if (subjectName) {
this.subjectsNames.push(subjectName);
this.subjectsNames.slice();
console.log(subjectName);
console.log(this.subjectsNames);
}
};
<div class="semester-div">
<ul>
<li ngFor="let subject of subjectsNames">
<span>
<input #subjectName type="text" />
<input id = "subjectGrade" type = "number"/>
<input id = "subjectWeight" type = "number"/>
</span>
</li>
</ul>
<br>
<button (click)="addSubject(subjectName.value)">add</button>
<br>
</div>
You are missing the * in *ngFor
<li *ngFor="let subject of subjectsNames">
The way you have your controls written subjectName does not exist because the array is empty and therefore the *ngFor does not render it. Clicking the Add button results in a exception that the value doesn't exist on undefined where undefined is really subjectName.
Moving it outside of the *ngFor will make things work:
<input #subjectName type="text" />
<ul>
<li *ngFor="let subject of subjectsNames">
<span>
{{subject}}
<input id="subjectGrade" type="number"/>
<input id="subjectWeight" type="number"/>
</span>
</li>
</ul>
I suspect you also want to further bind the data as you iterate over the subject names but that's outside the scope of the question.
Here's a plunker: http://plnkr.co/edit/HVS0QkcLw6oaR4dVzt8p?p=preview
First, you are missing * in *ngFor.
Second put out
<input #subjectName type="text" />
from ngFor, should work.
i want to show and hide a div based on selection from the drop down , here is my code, this is my html code for dropdown which fetches the values from the "selectItemsFilterCriteria" json structure
<select ng-model="appointment" ng-change="changeme()" ng-options="item.name for item in selectItemsFilterCriteria">
<option ng-option value="" >Filter Criteria</option>
</select>
this is my changeme() function created inside a controller
$scope.changeme = function() {
$scope.appointment = $scope.items[0];
}
this is code for my div that is to be show or hide , right now my code is working on selection of first option from drop down it is showing me the div but the problem is that its not hiding that div on the selection of any other option from the dropdown list, kindly tell me where i m doing wrong??
<div class="mycontainer" ng-show=appointment >
<div class="left-nav">
<accordion close-others="true">
<accordion-group ng-repeat="item in pagedItems[currentPage] |filter:{name:item.name}| orderBy:sortingOrder:reverse">
<accordion-heading>
<table>
<tr class="odd" ng-click="showDataDetail=!showDataDetail" style="cursor: pointer">
<td><p class="lead-name">{{item.name}}</p>
<p class="call-up-icon">{{item.phoneNo}} </p>
<p>Lead Date : 07/02/2015</p></td>
<td><p></p>
<p class="blue-txt">{{item.trade}}</p>
<p class="fl cstm-wdth">GNU09</p>
<p class="fl">{{item.time}}</p>
<div class="cb"></div>
</td>
<td><p>Today</p>
<p>C#SQL</p>
<p class="blue-remark-icon"></p></td>
</tr>
</table>
</accordion-heading>
<div>{{item.data}}</div>
</accordion-group>
</accordion>
</div>
</div>
items array:
$scope.selectItemsFilterCriteria = [
{id:1 , name:"Appointments Scheduled"},
{id:2 , name:"fresh leads"}
];
Basically the problem is with your ng-change function call,
$scope.changeme = function() {
$scope.appointment = $scope.items[0];
}
You are setting appointment to first value of items array. Hence whenever you change the options, the function sets it back to first option , in turn the div is shown.
Please remove the ng-change function and try.
Remove the $scope.changeme() function. It is not necessary.
Since you are using ng-model on select whatever option you select will get assigned to the ng-model i.e appointment in your case.
Here is the plunkr example