I have the following requirement,
I have an array as customers (values such as cust1,cust2,cust3).
I have textbox, in which when I enter some values it will filter the customers arraylist and displays my result (For example : if i enter cust1 in textbox, it will display cust1)
If the value entered in textbox not in the arraylist (customers), i want to change textbox colour to red.
Could anyone guide to do this.
My approach
<div class="container">
<h2>View 1</h2>
Name:
<br />
<input type="text" ng-model="filter.name" /> -- I want to change this textbox colour
<br/>
<ul>
<li ng-repeat="cust in customers | filter : filter.name | orderBy:name">{{cust.name}} {{cust.city}}</li>
</ul>
<br/>
The solution for this is rather simple.
First, you need to modify your ng-repeat in the following way:
ng-repeat="cust in customers | filter : filter.name | orderBy:name as filteredCustomers"
Notice the as filteredCustomers in the end. This saves the resulting filter to $scope.filteredCustomers.
Then, you just have to modify your input to use a conditional CSS class:
<input type="text" ng-model="filter.name" data-ng-class="{'red': filteredCustomers.length === 0}" />
Also you will have to define the .red CSS class with background-color: red; or something similar.
Proof of concept: http://jsbin.com/diyehagemo/2/
Related
This is the currency code I used to use before making it is-static
| currency('£')
This is my input field as of now without the currency -
<input v-bind:class="{'is-static': !foodItem.editing}" type="text" class="input" v-model="foodItem.price">
When I implement it myself it keeps messing it all up, any idea how to add that currency to my input, many thanks in advance.
You can use if else block:
<div v-if="!foodItem.editing">{{ foodItem.price | currency('£') }}</div>
<div v-else>{{ foodItem.price }}</div>
You're applying is-static class when the value of foodItem.editing returns false. So, in that condition you'll get currency filter applied.
I have a input list coming from modal window so these are selected names displaying in input field, Now i want to apply styling on names so it can display as separate names , I know i am using join(;) for separator between names but that's not enough.
How can i add styling that can be more readable for the users , like if i can apply background color to each of selected items that will be better.
main.html
<input type="text" class="form-control customReadOnly"
style="font-size: 20px; background-color:red"
id="prcsOwner" required ng-model="processOwnerObj.workerName"
name="prcsOwner" readonly="readonly"
placeholder="Process Owner" />
ctrl.js
$scope.processOwnerObj.workerName= $scope.selectedOwners.map(function (owner) { return owner.fullName; }).join(';');
You cannot user ng-model that way...
You might have to use $parsers and $formatters in a directive
See here and the docs...
I am trying to filter some results using the selected value from an ng-select (stripping out formatting and other irrelevant information) I have:
<select ng-model="medium" ng-options="medium as medium.name for medium in mediaList" ng-change="loadSubMediums(medium)"></select>
Here, the loadSubMediums function takes medium with its properties and console.logs the correct medium that I choose. For reference to something working the way I expected:
<input type="text" class="search-query form-control" placeholder="Search" ng-model="searchText" />
This ng-model is "searchText" and works excellent to filter this ng-repeat:
<div class="card" ng-repeat="artist in featured | filter:searchText | filter:medium.name">
The problem is the second filter. I've tried variations on medium, medium.name, {{medium.name}}, trying to access the $scope. I have spend so much time banging my head on the wall, and it seems like it could be so straight forward.
Any thoughts?
This is exactly what I was trying to do:
Is this correct? plnkr.co/edit/IwvetYNB0tLVWcLZGG50?p=preview
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 trying to generate multiple pairs of a number form and a checkbox.
Clicking the checkbox disables the number field, The problem is that only the first pair is working. Can someone help me?
here's my code: addHRGrade.blade.php
#extends('layouts.default')
#section('content')
<!-- opening the form -->
{{ Form::open(array('url' => 'students/create', 'method' => 'PUT')) }}
#foreach($students as $stud)
<ul>
<li>
<!-- Printing the students retrieved from the dataabase -->
{{ $stud->LName. " , " .$stud->FName }}
<!-- Making a text field for every students -->
<div ng-app="" >
<input name="grade" id="no_grade" type="checkbox" value="0" ng-model="checked" />
<label>No Grade</label>
<input name="grade" id="num_grade" type="number" value="65" ng-model="number" ng-disabled="checked"/>
</div>
</li>
</ul>
#endforeach
<!-- Save button -->
<p> {{Form::submit('Save')}} </p>
<!-- Closing the form -->
{{ Form::close() }}
#stop
Main issue
You're declaring one ng-app="" per table row. I don't think that's what you want to do. You should wrap everything into a single app. Also, you don't assign anything to ngApp and also ngController so your not able to implement any further logic.
Side issues
When you fixed the main issue, you'll see, that every checkbox and textbox will display the same value, since you assign the same model to each checkbox resp. textbox.
The value="65" won't do anything. You want to display the models data, so the models data (which is undefined at startup). To set the initial value use ng-init="number=65".