In extending to the question how to disable submit button or make form invalid if i have any duplicates
Got Solution : here is my code
HTML
Submit
JS
$scope.myform.$setValidity('invalid',!((sorted[i-1] && sorted[i-1].voucherCode == sorted[i].voucherCode) || (sorted[i+1] && sorted[i+1].voucherCode == sorted[i].voucherCode)));
Somewhere in your Controller
$scope.hasDuplicate = function() {
var sorted;
sorted = $scope.csTagGrp[0].csTags.concat().sort(function(a, b) {
if (a.keys > b.keys) return 1;
if (a.keys < b.keys) return -1;
return 0;
});
return sorted.some(function(nth, i){
if(i> 0 && i < sorted.length) {
return ((nth[i - 1].keys == nth.keys) || (sorted[i + 1].keys == nth.keys));
}
return false;
});
};
In template
<button type="submit" ng-disabled="hasDuplicate()"> Save </button>
Related
i have a single toggle button that changes color when clicked active. but now i'm stuck as to how i'll get the value of the button (active or inactive) in my controller. how should i approach this?
here's the error code:
TypeError: Cannot read property 'clicked' of undefined
here's the html code:
<button class="button button-clear icon ion-star button-energized" ng-model="singleTog" ng-click="toggleButton(item.name)" ng-class="singleTog.clicked?'button-energized':'button-dark'" ></button>
and here's the controller.js code:
$scope.toggleButton = function(candidateName)
{
$scope.singleTog.clicked=!$scope.singleTog.clicked
if($scope.singleTog.clicked==true)
{
if(favoriteList.indexOf(candidateName) == -1) //does not exist in array
{
$scope.numbers.push(candidateName);
}
}
else
{
if(favoriteList.indexOf(candidateName) != -1) //exists in array
{
var index = $scope.favoriteList.indexOf(candidateName);
$scope.favoriteList.splice(index, 1);
}
}
alert('favorites = ' + favoriteList);
}
Define an emty object as $scope.singleTog = {}
Try this
$scope.singleTog = {}
$scope.toggleButton = function(candidateName)
{
$scope.singleTog.clicked=!$scope.singleTog.clicked
if($scope.singleTog.clicked==true)
{
if(favoriteList.indexOf(candidateName) == -1) //does not exist in array
{
$scope.numbers.push(candidateName);
}
}
else
{
if(favoriteList.indexOf(candidateName) != -1) //exists in array
{
var index = $scope.favoriteList.indexOf(candidateName);
$scope.favoriteList.splice(index, 1);
}
}
alert('favorites = ' + favoriteList);
}
If you just want to change the color of the button when it is active or inactive you can use ng-class for that:
ng-class="$variableToEvaluate ? 'class-if-true' : 'class-if-false'"
I need some help.
screenshot: https://monosnap.com/file/VxAdq975FVT6QHkECfxlFyHgGd3sAn
I have 3 filters on top: rooms, size and price. How to filter table results, when something typing in the filter fields?
UPDATE
$scope.$watch( '[min_size, max_size]', function(val) {
$scope.filterBySizeRange();
});
$scope.filterBySizeRange = function() {
$scope.filteredSizes = [];
angular.forEach($scope.apps, function(items) {
if (items.size >= $scope.min_size
&& items.size <= $scope.max_size) {
$scope.filteredSizes.push(items);
}
if (!$scope.min_size
&& !$scope.max_size) {
$scope.filteredSizes.push(items);
};
});
};
UPDATE 3
Here is my solution, that works with single or multiple range input fields
fiddle
I think you want to use $watchGroup.
$scope.$watchGroup(['min_size', 'max_size'], function(val) {
$scope.filterBySizeRange();
});
$scope.filterBySizeRange = function() {
$scope.filteredSizes = [];
angular.forEach($scope.apps, function(items) {
if (items.size >= $scope.min_size
&& items.size <= $scope.max_size) {
$scope.filteredSizes.push(items);
}
if (!$scope.min_size
&& !$scope.max_size) {
$scope.filteredSizes.push(items);
};
});
};
Anyway I believe that it would be better to create your own filter function
// template
<div ng-repeat="item in apps|sizefilter:min_size:max_size">
// filter
app.filter('sizefilter', function() {
return function(collection, minSize, maxSize) {
var items = collection.slice(0, collection.length -1);
var i =0, len = items.length
for (; i < len;) {
if (items.size < minSize && items.size > maxSize) {
items.splice(i, 1);
} else {
i++;
}
}
return items;
});
};
});
// Min/max size filter
$scope.sizeFilter = function(app){
if (!$scope.min_size && !$scope.max_size) {
return app;
} else if(!$scope.max_size){
return (app.size >= $scope.min_size);
} else if(!$scope.min_size){
return (app.size <= $scope.max_size);
} else {
return (app.size >= $scope.min_size && app.size <= $scope.max_size);
}
}
I wrote a simple filter that gets a localized text. I use it in a list. When a word is not found I want to hide the item. I manage to solve the problem like this:
<ion-item ng-repeat="(key, data) in details" ng-if="key != 'Id' && key != 'Invoices' && key != 'Number' && key != 'Attributes' && data && key!= null" ng-show="(key | translate: clientCode:'Payments':'es').length > 0">
<p style="float:left; text-transform: capitalize;">{{key | translate: clientCode:'Payments':'es'}}:</p>
<p style="float:right;">{{data}}</p>
</ion-item>
However I am using the filter twice in each item which makes me feel weird. Is there a better way to do this? Thanks you all very much.
If it helps here is my filter code:
.filter("translate", function(Text) {
var data = null, serviceInvoked = false;
function realFilter(input) {
for(var i = 0; i < data.length; i++)
{
if(data[i].Field == input)
{
//console.log(data[i].Description);
return data[i].Description;
}
}
}
testFilter.$stateful = true;
function testFilter(input, clientCode, type, lang) {
if( data === null ) {
if( !serviceInvoked ) {
serviceInvoked = true;
var texts = Text.query({"clientCode": clientCode, "type": type, "lang": lang});
texts.$promise.then(function() {
data = texts;
});
}
return "-";
}
else return realFilter(input);
}
return testFilter;
});
I created a cell template that depends on a filter, but the filter is not processed.
The cell is defined as {field:'status', displayName:'Status', cellTemplate: 'cell/statusCellTemplate.html'}] where the template is
<button class="btn btn-primary" ng-click="changeStatus(row.getProperty('id'),'{{row.getProperty(col.field) || switchStatus}}')">{{row.getProperty(col.field)}}</button>
EDIT
myapp.filter('switchStatus', function() {
return function(input) {
return (input == 'STOPPED') ? 'STARTED' : 'STOPPED';
};
});
The rendered cell is <button class="btn btn-primary ng-scope ng-binding" ng-click="changeStatus(row.getProperty('id'),'STOPPED')">STOPPED</button>. I expect STARTED for the second parameter.
Plunker: when clicking on STOPPED, the current status should be STARTED
Where does data come from? I think you meant to check if input is 'STOPPED' or 'STARTED' like this:
app.filter('switchStatus', function() {
return function(input) {
var out = "";
if (input == 'STOPPED') {
out = 'STARTED';
} else if (input == 'STARTED') {
out = 'STOPPED';
}
console.log(input + " " + out);
return out;
};
You could make your filter shorter by writing:
app.filter('switchStatus', function() {
return function(input) {
return (input == 'STOPPED') ? 'STARTED' : 'STOPPED';
};
I use CGI C and try to use a combobox in a form. When i change selected value and press save button, before submitting the form i can see the selected value changes. It becomes 7 always. I can not find out why. Here is my code:
<form method=POST action="cgi-bin/aa.cgi?aa.xml" name="aform" onsubmit="return checkConForm(document.aform);">
<table class=conftable>
<td class=conftabletd>
<select name="aa" id="aa" >
<option value=2>2</option><option>1</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option>
</select></td>
</tr>
</table><br>
save
</form>
js :
function checkConfigForm ( form )
{
var selectLists = document.getElementsByTagName("select");
for ( var i=0; i<selectLists.length; i++ ) {
if (selectLists[i].id != null) {
alert(selectLists[i].id);
selectOpts(selectLists[i].id);
}
}
return true;
}
function selectOpts( selectId )
{
var selectList = document.getElementById(selectId);
var selectListLength = selectList.length;
if (selectListLength == 0){
appendOptionLastwValue( selectId, "" );
selectListLength = 1;
}
for (var i = 0; i < selectListLength; i++) {
selectList.options[i].selected = true;
}
return true;
}
function submitform( form )
{
if(form.onsubmit() == true){
form.submit();
}
Obviously you are setting every option of the SELECT object to TRUE here one after another:
for (var i = 0; i < selectListLength; i++) {
selectList.options[i].selected = true;
}
after submitting the form, the last option ( options[6] = 7 ) being selected as the result.