We Keep Coding

how to add multiple search data

so I need help with my code. My boss wanted to search in my dropdown category multiple times for example in ID, more likely a range value, example i want to search SCP ID values: 123 and 169, all significant data will show that matches the record.i attach my UI sample belowsample UI my problem is that in my UI i can only search 1 value only for the same category. someone help me pls with the function and design. thanks alot.
This is my HTML:
<input type="text" id="txtsid" style="width: 70%; margin-left:2px;" value="" ng-model="sid" class="input-group inline form-control" placeholder="SCP ID" ng-required="true" required>
<button id="scpid1" class="btn btn-primary" onclick="addFields()">ADD</button>
This is my function:
$scope.sid=$scope.sidData;
$scope.filterSearch2nd = function(sid) {
if(sid ==""){
sid="scpid";
}
$rootScope.loader = true;
skinCareProdService.filter2ndSearch(sid)
.then(function(data){
$scope.rawSCP = data.data;
$rootScope.loader = false;
$scope.sidData=data.data[0].SCP_id;
}
);
}
i also use append

is there any way to bind ng-model to multiple input fields uniquely inside a directive?

In my Project i Got a Issue like.I need to bind the user hobbies in the text field.if the user comes with a single hobby he can directly enter the hobby that he has. but when he had multiple then he had to click add multiple hobbies button.that working fine when i am displaying input fields dynamically using directives.but the issue is the value that coming from ng-model for that input field is binding to all input fields.
Here is my code.
Thanks in advance!
these are the images
this is how i am getting
this is what i need
In HTML
<div>
<div id="showHobbyfield"></div>
<input type="number" class="form-control" placeholder="ADD HOBBIES"
ng-click="addHoby()">
</div>
In controller
$scope.addHoby= function(){
var compiledeHTML = $compile("<div my-hobby></div>")($scope);
$("#showHobbyfield").append(compiledeHTML);
};
$scope.addUser = function(){
$scope.Users= [];
var obj = {
userhobby : $scope.user.morehobies
};
$scope.Users.push(obj);
menuStorage.put($scope.Users);
//menustorage is service to store user in localStorage.
In directive
'use strict';
angular.module('myApp')
.directive('myHobby', function() {
return {
scope : false,
templateUrl: 'views/my-hobby.html'
};
});
this is template: my-hobby.html
<div class="input-group">
<input type="text" ng-model="user.morehobies" class="form-control" placeceholder="type your hobbies here">
<div class="close-icon">
<span class="glyphicon glyphicon-remove" style="padding-left: 6px;"> </span>
</div>
</div>

For this i would suggest some other way if its ok with you.
If your hobbies is coming in array, like
user.morehobies = ['Reading', 'Writing']
or create array for storing hobbies.
then inside directive you can pass that object in directive.
I will use ng-repeat inside directive.
<div class="input-group" ng-repeat="h in hobies">
<input type="text" ng-model="h" class="form-control" placeceholder="type your hobbies here">
<div class="close-icon">
<span class="glyphicon glyphicon-remove" style="padding-left: 6px;"> </span>
</div>
</div>
so whenever user clicks on "Add hobbies" then we can add empty string in hobbies object in directive.
and whenever user clicks on remove you can remove that item from array.

Angular Js: How can i fire ng-blur on input field as soon as is displayed?

THE SITUATION:
Hello guys. In my app i have a button to create a new folder.
When that button is clicked there appears an input field where to enter the name and create the folder.
On the input field there is an ng-blur that creates the folder if the input is not empty, otherwise hide the input field.
The ng-blur is activated once i click inside the input field at least one time. Otherwise is not fired.
What I would like to obtain is this:
Once the button 'Add a new folder' is clicked and the input field appears, it will disappear as soon as i click somewhere else (without having to click inside the input one time).
To have a reference, i mean exactly how it works inside Outlook to create a new email folder.
THE QUESTION:
Is it possible to set the cursor inside the input field, once it appears? In this way the ng-blur will probably be fired and i will obtain what i need.
Alternatively it is possible to apply the same functionality of ng-blur to a button?
THE CODE:
<li> <i class="fa fa-plus"></i> Add folder </li>
<li ng-if="folder_box_view == 'display_folder_box'">
<div class="input-group">
<input type="text" class="form-control" ng-model="new_folder_name" ng-blur="folder_blur( new_folder_name )">
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="folder_new( new_folder_name )">{{ 'ADD_BUTTON' | translate }}</button>
</span>
</div>
</li>
Thank you

The best solution was actually to set the focus on the input field as soon as it appears. In this way by clicking outside the ng-blur is fired as i wanted.
This is how i set the focus:
app.directive('focusMe', function($timeout) {
return {
scope: { trigger: '=focusMe' },
link: function(scope, element) {
scope.$watch('trigger', function(value) {
if(value === true)
{
element[0].focus();
scope.trigger = false;
}
});
}
};
});
<li> <i class="fa fa-plus"></i> Add folder </li>
<li ng-if="folder_box_view == 'display_folder_box'">
<div class="input-group">
<input type="text" class="form-control" ng-model="new_folder_name" ng-blur="folder_blur( new_folder_name )" focus-me="focusInput">
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="folder_new( new_folder_name )">{{ 'ADD_BUTTON' | translate }}</button>
</span>
</div>
</li>
The solution was found in this StackOverflow answer:
How to set focus on input field?

How come my input box's value isn't being returned?

Using twitter bootstrap, I have created a button with an input box beside it. I'm trying to then access that value in my view using jQuery but for some reason I can't get anything back besides "undefined". Here's my code:
jQuery:
var browserInput = $("#browserInput").val();
console.log(browserInput);
Html:
<div class="col-lg-4">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" id="addBrowser">
<span class="glyphicon glyphicon-plus"></span>
Add
</button>
</span>
<input id="browserInput" type="text" class="form-control" style="display: none;" >
</div>
</div>

If this is your actual code layout, you won't get a value because the DOM isn't loaded at the time you are requesting the value.
You should try to wrap your function in document ready
$(document).ready(function() {
var browserInput = $("#browserInput").val();
console.log(browserInput);
});
If you want to have the value on keyup or interaction with the input box, you can also do it like
$(document).ready(function() {
$('#browserInput').on('keyup',function() {
var browserInput = $("#browserInput").val();
console.log(browserInput);
});
});

I'm going to undelete my answer because apparently it helped the poster solve his issue...
<input id="browserInput" type="text" value="" class="form-control" style="display: none;" />
Seems that having the value="" in the <input> tag made a difference for him.
I wonder if he meant "" instead of undefined.

Javascript Dynamic Form Field

I am having difficulty with a javascript that I need some help with. I have a form which sends to a php the exact amount of inputs to be filled, now I want to create a preview using jQuery/javascript but how can I catch all the fields dynamically.
Here is a portion of my form for reference:
<td>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-pencil"></i></span>
<input class="form-control" id="task" type="text" name="task" placeholder="Task Title">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-pencil"></i>
</span>
<input class="form-control" id="description" type="text" name="description" placeholder="Task Description">
</div>
</td>
So, I added in PHP the name field + the number, this way I can get different names ie: task1, task2,...etc.
Now what I need to do is get the values using jQuery/javascript.
My thoughts so far is to declare the var (variable) inside a for() (loop)
var task = $('input[name=task]').val();
How can I get all values task1, task2. No one knows how many task fields the user will submit so I need to get the number of fields
Any help direction so I can figure this out

First of all, you don't need to give your input fields names like task1, task2, etc to distinguish among them on the server-side i.e on the PHP. You just need to give all of them a name attribute value like tasks[] And notice the brackets [] so you may have something like the following:
<input class="form-control" id="tasks[]" type="text" name="tasks[]" placeholder="Task Title">
...
<input class="form-control" id="tasks[]" type="text" name="tasks[]" placeholder="Task Title">
Like that automatically values in those fields will be posted as an array to the PHP and it is going to be received like the following in PHP script:
$tasks = $_POST['tasks'];
foreach ($tasks as $task){
echo $task;
}
Second By this way you will easily able to collect your inputs data using Javascript inorder to generate the preview by using getElementsByName method as follows:
function preview(){
output = "";
tasks = document.getElementsByName('tasks[]');
for (i=0; i < tasks.length; i++){
output += "<b>Title</b>: "+tasks[i].value+"<hr />";
}
panel = document.getElementById('panel');
panel.innerHTML = output;
}
Of course you can expand this solution to any number of fields in your form such as descriptions[].
A javascript DEMO: http://jsbin.com/kiyisi/1/

Using the Attribute Starts With Selector [name^="value"] and jQuery.each()
var tasks = $('input[name^=task]').val();
$.each(tasks,function(index, value){
//do something with the value
alert($(this).val());
});
edit
var tasks = $('input[name^=task]');
$.each(tasks,function(index, value){
//do something with the value
$('#Preview').append($(this).val());
});

Q: now I want to create a preview using jquery/javascript but how can I catch all the fields dinamically:
If you give them a class, you can get all fields with each:
$(".className").each(function() {
do something
Next, "catch" all fields... I'm assuming you may want the values of these fields too? Check this example for details, here is a snippet which loads the key:value pairs (form field name : value of field) into a map:
var map = {};
$(".activeInput").each(function() {
map[$(this).attr("name")] = $(this).val();
});
Print all values inside div (Here, I'm assuming you're talking about children values of div):
<div>
<span>Hi</span>
<span>Hello</span>
<span>Hi again</span>
</div>
$("div").children().each(function () {
console.log($(this).text());
});
OR
$("div span").each(function () {
console.log($(this).text());
});