Dropdown:
<select class="form-control" id="column" ng-model="selectedcolumn"
ng-options="column for column in columns"></select>
I want to get the drop down value for search ,something like this:
<input type="text" ng-model="SearchValue.{{selectedcolumn}}" />
<tr ng-repeat="row in table | filter:SearchValue">
I want to make search for a perticular column, not for the whole table
and the column will be decided by the dropdown.
Try <input type="text" ng-model="SearchValue[selectedcolumn]" />
Check the Demo
Related
I am trying to populate a checkbox, a label and two text boxes on ng-repeat loop.
When the checkbox is selected, its corresponding row is enabled for text boxes to be editable. I need to get the data entered in the first row and then copy that data to the next rows which ever is selected.
<div class="row" ng-repeat="option in coverages">
<div class="col-md-3">
<input id="{{option}}" type="checkbox" ng-model="optionChecked" class="border-horizontal" />
<label for="{{option}}">{{option}}</label>
</div>
<div class="col-md-3">
<input type="text" class="form-control input-sm border-horizontal" ng-disabled="!optionChecked" />
</div>
<div class="col-md-3"><input type="text" class="form-control input-sm border-horizontal" ng-disabled="!optionChecked" />
</div>
</div>
If I understand correctly you need to know if previous value is checked and you neeed to access previous value, then you can probably refer to this
How to obtain previous item in ng-repeat?
Is this what you are looking for?
I do a query on a table and obtain 25-30 results.
$items = item::all();
And then give it to the blade:
return view("myview",compact'items');
I display those results on my blade like this:
#foreach($items as $item)
<select onchange="changeTextInputs()">
<option value="{{item->id}}">{{$item->name}}<input type="hidden" value={{item->color}}>
<input type="hidden" value={{item->shape}}>
<input type="hidden" value={{item->color}}>
...
</option>
#endforeach
<input type ="text" value="" id="item_color">
<input type ="text" value="" id="item_shape">
...
When changing the select, my javascript fills the inputs with the information of each item - as intended. Everything works just fine.
I honestly don't like to put the hidden inputs in the selects. Anyone knows other way to do this on Laravel?
Today I faced a situation with angularJS.
Hi have a recipe website, and to list the ingredients and theyr respective dosage I'm using angular's ng-repeat (here goes the snippet).
<div ng-repeat="food in foodList | filter:query">
<label>
{{food.name}}
</label>
<input type="text" class="form-control food-list-input" data-id="{{food.ingredientId}}" placeholder="Weight in grams.">
</div>
The thing is that when I apply the filter, all inputs I previously inserted some value, if they are hidden because of the filter, they return to empty.
Is there anyway around this?
I think you probably want to bind the input to something using ng-model, for example:
<input type="text" ng-model="food.dosage" class="form-control food-list-input" data-id="{{food.ingredientId}}" placeholder="Weight in grams.">
That will implement two-way binding from your model to the input tag, so that when ng-repeat re-runs, the previously entered values will be re-bound from the model.
I'm using Angular.js 1.2 and I'm trying to use a Select input in the cell of an ngTable. The Option list populates but the ngModel directive doesn't seem to select the item for display.
This is what my table looks like at the moment:
<table class="col-xs-12 table" data-ng-table>
<tr data-ng-repeat="task in template.tasks">
<td data-title="'Category'">
<select class="form-control template-task-category" data-ng-model="task.categoryId" data-ng-options="category.description for category in taskCategories track by category.id"></select>
</td>
<td data-title="'Description'">
<input class="form-control template-task-description center-block" data-ng-model="task.description"/>
</td>
<td data-title="'Default Role'">
<select class="form-control" data-ng-model="task.defaultRoleId" data-ng-options="role.Name for role in roles track by role.id"></select>
</td>
<td data-title="'Est. Hours'">
<input class="form-control template-task-hours center-block" data-ng-model="task.estimatedHours"/></td>
<td data-title="'Order'"><input class="form-control template-task-sort center-block" data-ng-model="task.sortOrder"/>
</td>
<td data-title="'Remove'">
</td>
</tr>
</table>
The Category and Default Role columns always show as un-selected dropdowns, and when I display the task.categoryId and task.defaultRoleId directly they do have values that are part of the Options list. Is there something more I need to do here?
Edit
Here's an example. What I was expecting was for the dropdowns to have the associated value selected. http://plnkr.co/edit/9DkSQT?p=preview
I figured it out. The ng-model needed to point at a full instance of the associated object and not just the property that held the id. In my class I had both an Id field (that mimicked the database table) and the associated instance. Binding to the instance (task.taskCategory instead of task.categoryId) fixed it.
I have data being passed to my view in following format
id name color type
1 Ford red sdean
2. Nisan blue truck
........
Following dropdown populates it by name
<tr ng-repeat="p in allautos">
<td>
<select ng-model="p.id" ng-options="c.id as c.name for c in records"></select>
</td>
<td>
<input type="text" ng-model=p.color />
</td>
<td>
<input type="text" ng-model=p.type />
</td>
</tr>
What I am trying to do is when name is selected in the drop down I want corresponding values to populate in the input fields of color and type. Please let me know the best way to achieve that. Thanks
I think you are looking for this:
<select ng-model="p" ng-options="c.name for c in records track by c.id"></select>
http://plnkr.co/edit/m9ubFrYdAgPXMGhfri79?p=preview
This uses a tracking expression to help angular to match the auto in the option array.