AngularJS ui-select multiple should show alert if limit is crossed - javascript

In AngularJS ui-select multiple, I can add a limit to it, or create an alert. But I'm not able to do both. If I show the alert, the previous selected options are not cleared from the UI. Codepen: https://codepen.io/pragatij55/pen/mdpzmqp
I know I can use limit="2", but I also want an alert.
<div ng-app="demo" class="ng-cloak" ng-controller="DemoCtrl">
<ui-select multiple ng-model="myModel" theme="bootstrap" ng-disabled="disabled" close-on-select="false" style="width: 800px;" on-select="changed(myModel)" title="Choose a person">
<ui-select-match placeholder="Select person...">{{$item.name}}</ui-select-match>
<ui-select-choices repeat="person.name as person in people | propsFilter: {name: $select.search, type: $select.search}">
<div ng-bind-html="person.name | highlight: $select.search"></div>
<small>
type: <span ng-bind-html="''+person.type | highlight: $select.search"></span>
</small>
</ui-select-choices>
</ui-select>
</div>
JS:
app.controller('DemoCtrl', function ($scope, $http, $timeout, $interval) {
$scope.people = [
{ name: 'var1', type: 'header' },
{ name: 'var2', type: 'site' },
{ name: 'var3', type:'header' },
{ name: 'var4', type:'header' }
];
$scope.changed = function(val) {
if(val && val.length > 2) {
$scope.myModel = $scope.prevModel;
alert("Upto 2 variables can be selected")
} else {
$scope.prevModel = val;
}
}
});

Not sure if this is what you want, but you can remove that 3rd item right before the alert with Array.pop() right here:
$scope.changed = function(val) {
if(val && val.length > 2) {
val.pop();
In context:
app.controller('DemoCtrl', function ($scope, $http, $timeout, $interval) {
$scope.people = [
{ name: 'var1', type: 'header' },
{ name: 'var2', type: 'site' },
{ name: 'var3', type:'header' },
{ name: 'var4', type:'header' }
];
$scope.changed = function(val) {
if(val && val.length > 2) {
val.pop(); // <- add this line
$scope.myModel = $scope.prevModel;
alert("Upto 2 variables can be selected")
} else {
$scope.prevModel = val;
}
}
});

Related

How to modify a particular div of ng repeat based on json value in angularjs

I have a drop down,when I change the drop down option to cities,state..I am populating the values from json.Here my requirement is when I populate the value 'No data' on change of dropdown,that time button should hide for particular value only.Here is the code below.
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select class="change" ng-model="x" ng-change="update()">
<option value="city">Cities</option>
<option value="state">States</option>
<option value="country">Countries</option>
</select>
<div ng-repeat="emp in groups" class="test" ng-attr-id="{{emp[attr]}}">
<p>{{emp[attr]}}<button ng-if="emp[attr]!='No data'" type="button">My button</button></p></div>
<div ng-if="emp[attr]=='No data'">No db found</div>
</div>
</div>
script
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.groups = [{
title: 'title1',
name: 'name1',
details: 'No data',
id : 1
},
{
title: 'No data',
name: 'name2',
details: 'two',
id : 2
},
{
title: 'title3',
name: 'name2',
details: 'three',
id : 3
}
]
$scope.update = function() {
if ($scope.x == 'city') {
$scope.id = 'city';
$scope.attr = 'details';
}
if ($scope.x == 'state') {
$scope.id = 'state';
$scope.attr = 'title';
}
if ($scope.x == 'country') {
$scope.id = 'country';
$scope.attr = 'name';
}
}
});
I guess ng-if will be the optimum solution if you are already aware about the condition when to hide data, in your case 'No data'.
In your HTML you can add the condition
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.groups = [{
title: 'title1',
name: 'name1',
details: 'No data',
id: 1
},
{
title: 'title2',
name: 'name2',
details: 'two',
id: 2
},
{
title: 'title3',
name: 'name2',
details: 'three',
id: 3
}
]
$scope.changeCss = function(input) {
if (input === 'No data') {
return {
'color': 'red'
}
}
}
$scope.update = function() {
if ($scope.x == 'city') {
$scope.id = 'city';
$scope.attr = 'details';
}
if ($scope.x == 'state') {
$scope.id = 'state';
$scope.attr = 'title';
}
if ($scope.x == 'country') {
$scope.id = 'country';
$scope.attr = 'name';
}
}
});
app.filter('modifydata', function() {
return function(input) {
if (input && input.length > 0) {
if (input === 'No data')
return 'No db found'
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select class="change" ng-model="x" ng-change="update()">
<option value="city">Cities</option>
<option value="state">States</option>
<option value="country">Countries</option>
</select>
<div ng-repeat="emp in groups" class="test" ng-attr-id="{{emp[attr]}}">
<p ng-style="changeCss(emp[attr])">{{emp[attr] | modifydata}}<button ng-if="emp[attr]!='No data'" type="button">My button</button></p>
<!--place here in the scope of ng-repeat-->
<div ng-if="false" class="error">hello</div>
</div>
<!--<div ng-if="false" class="error">hello</div>-->
</div>
</div>

Multi level json filter in angular js

I am new in angular js i want to put filter in ng-repeat i have json like this
var data = [
{name:test1,b1:{lastValue:0},b2:{lastValue:6},b3:{lastValue:6},b4:{lastValue:0}}
{name:test2,b1:{lastValue:6},b2:{lastValue:0},b3:{lastValue:6},b4:{lastValue:0}}
{name:test3,b1:{lastValue:6},b2:{lastValue:0},b3:{lastValue:6},b4:{lastValue:0}}
]
I want to put filter on lastValue i tested like this
ng-repeat = "d in data | filter:{*.lastValue:filterStatus}"
filterStatus // contain value of filter which user selected but its not working
I don't know how to do this i tried google but nothing found please help me
<input ng-model="filterStatus" type="text">
your filterStatus should hold model value
ng-repeat = "d in data | filter:filterStatus"
var app = angular.module("Profile", []);
app.controller("ProfileCtrl", function($scope) {
$scope.filter_val = {}
$scope.data = [{
name: 'test1',
b1: {
lastValue: 0
},
index: 'b1'
}, {
name: 'test2',
b2: {
lastValue: 6
},
index: 'b2'
}, {
name: 'test3',
b3: {
lastValue: 6
},
index: 'b3'
}, {
name: 'test4',
b4: {
lastValue: 0
},
index: 'b4'
}, {
name: 'test5',
b5: {
lastValue: 89
},
index: 'b5'
}, {
name: 'test6',
b6: {
lastValue: 68
},
index: 'b6'
}]
$scope.own_filter = function(val) {
if (!$scope.filter_val.value)
return true;
else {
return (String(val[val['index']]['lastValue'] || '').indexOf($scope.filter_val.value) != -1)
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="Profile" ng-controller="ProfileCtrl">
<input type="text" ng-model="filter_val.value" placeholder="Enter Last Value">
<div class="row" ng-repeat="event in data |filter:own_filter track by $index ">
<h4>{{'Name : ' + event.name}}------{{'Last Value : '+event[event['index']]['lastValue']}}</h4>
</div>
</body>
Use {$:filterStatus} construction:
angular.module('app', []).controller('ctrl',function($scope){
$scope.data = [
{name:'test1',b1:{lastValue:1},b2:{lastValue:6},b3:{lastValue:6},b4:{lastValue:0}},
{name:'test2',b1:{lastValue:2},b2:{lastValue:0},b3:{lastValue:6},b4:{lastValue:0}},
{name:'test3',b1:{lastValue:3},b2:{lastValue:0},b3:{lastValue:6},b4:{lastValue:0}}
]
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<div ng-app='app' ng-controller='ctrl'>
<input type='number' ng-model='filterStatus' ng-init='filterStatus=1'>
<ul>
<li ng-repeat='item in data | filter: {$:filterStatus}'>{{item.name}}</li>
</ul>
</div>

make auto-complete searchable drop-down don't want to display list on click just on search

fiddle link
<div ng-app="app" ng-controller="myCtrl as vm">
<ui-select tagging ng-model="vm.selected" theme="bootstrap">
<ui-select-match p laceholder="Pick one...">{{$select.selected.value}}</ui-select-match>
<ui-select-choices repeat="val in vm.values | filter: $select.search">
<span ng-bind-html="val.value | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>
</div>
var app = angular.module('app', ['ui.select', 'ngSanitize']);
app.controller("myCtrl", function() {
vm = this;
vm.isLoaded = false;
vm.values = [{
'key': 22,
'value': 'Kevin'
}, {
'key': 24,
'value': 'Fiona'
}];
vm.selected;
});
this is work fine but now i want to display list just on search don't want to display on click only on search word in search box
fiddle link
After a lots of experiments i found the answer of my question
var app = angular.module('app', ['ui.select', 'ngSanitize']);
app.controller("myCtrl", function() {
vm = this;
vm.funcAsync = function(query) {
if (query === null || query === ""|| query.length<1) {
return;
}
vm.isLoaded = false;
vm.values = [{
'key': 22,
'value': 'Kevin'
}, {
'key': 24,
'value': 'Fiona'
}];
vm.selected;
};
});

Check value of ng-model against string and do function

I have a few functions that I'm having to mix because of scope in a < select :
HTML:
<!-- COUNTRY -->
<select class="account--select" type="text" name="country" ng-model="data.country_id"
ng-options="o.code as o.name for o in content.countries" ng-change="reset();PookycountryChanged()">
<option value="">OTHER*</option>
</select>
Directive:
scope.PookycountryChanged = function() {
scope.$watch('data.country_id', function(){
if ('data.country_id' == "OTHER*") {
console.log('this is the other option selected');
}
});
}
AIM:
To be able to have a function run when the value of the option selected is equal to 'OTHER*'. Right now this is set to a simple console.log. Getting nothing in the console at the momento.
Any pointers?
UPDATE with Reset() function:
scope.reset = function(){
scope.isenabled = (scope.data.country_id == content.config.pca_country);
scope.country = _.findWhere(scope.content.countries, {code : scope.data.country_id});
};
scope.reset();
UPDATE 2:
Generated markup:
<select ng-change="reset()" ng-options="o.code as o.name for o in content.countries" ng-model="data.country_id" name="country" type="text" class="account--select ng-scope ng-valid ng-dirty"><option value="" class="">OTHER*</option><option value="0" selected="selected">United Kingdom</option></select>
Now you have a few problems with your code: in PookycountryChanged you not check value for data.country_id just create yet another watch, also in watch you compare string 'data.country_id' with string "OTHER*" so it always false.
In case where you select item with value="" model set value to null so in watch function you can check it like in snippet below.
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.reset = function() {
$scope.isenabled = ($scope.data.country_id == $scope.content.config.pca_country);
$scope.country = _.findWhere($scope.content.countries, {
code: $scope.data.country_id
});
};
$scope.content = {
config : {pca_country: 3},
countries: [{
code: 1,
name: 'name1'
}, {
code: 2,
name: 'name2'
}, {
code: 3,
name: 'name3'
}, {
code: 4,
name: 'name4'
}, {
code: 5,
name: 'name5'
}, {
code: 6,
name: 'name6'
}, {
code: 7,
name: 'name7'
}]
};
$scope.$watch('data.country_id', function(newVal) {
if (newVal === null) {
console.log('selected others');
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js"></script>
<div ng-app="app" ng-controller="ctrl">
<select class="account--select" type="text" name="country" ng-model="data.country_id" ng-options="o.code as o.name for o in content.countries" ng-change="reset();">
<option value="">OTHER*</option>
</select>
{{country}}
</div>
Or you can avoid even your reset function
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.content = {
config: {
pca_country: 3
},
countries: [{
code: 1,
name: 'name1'
}, {
code: 2,
name: 'name2'
}, {
code: 3,
name: 'name3'
}, {
code: 4,
name: 'name4'
}, {
code: 5,
name: 'name5'
}, {
code: 6,
name: 'name6'
}, {
code: 7,
name: 'name7'
}]
};
$scope.$watch('data.country_id', function(newVal, oldVal) {
if (newVal !== oldVal && !newVal) {
console.log('selected others');
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js"></script>
<div ng-app="app" ng-controller="ctrl">
<select class="account--select" type="text" name="country" ng-model="country" ng-options="o.name for o in content.countries" ng-change="data.country_id=country.code;isenabled=country.country_id==content.config.pca_country">
<option value="">OTHER*</option>
</select>
{{country}}
</div>
Remove PookycountryChanged() from your ng-change, then remove the function wrapping your $watch. There is no point having a watcher inside a function since the watch will always be running anyways.
Also change your option to this:
<option value="OTHER*">OTHER*</option>
Then you need to remove the quotation marks around data.country_id:
scope.$watch('data.country_id', function(){
if (data.country_id === "OTHER*") {
console.log('this is the other option selected');
}
});

Ionic + Angular unable to ion-radio to be checked by default

I'm trying to check one from radio buttons in radio list, but without luck.
Could somebody tell me what i'm doing wrong?
Thanks for any help.
I tried to do it by this way:
<div class="list">
<ion-radio ng-repeat="item in goalTypeList"
ng-value="item.value"
ng-change="goalTypeChanged(item)"
ng-checked="item.selected"
ng-model="data.clientSide">
{{ item.text }}
</ion-radio>
</div>
JS:
.controller('SettingsCtrl', function($scope, $ionicLoading) {
$scope.goalTypeList = [
{ text: "Dials", value: "dials", selected: true },
{ text: "Conversations", value: "conversations" , selected: false },
{ text: "Appointments", value: "appointments" , selected: false },
{ text: "Orders", value: "orders", selected: false }
];
$scope.data = {
clientSide: 'ng'
};
$scope.goalTypeChanged = function(item) {
console.log("Selected goalType, text:", item.text, "value:", item.value);
};
It seems that the value of data.clientSide is not in the list goalTypeList. Change the value to match any..
html:
<div class="list">
<ion-radio ng-repeat="item in goalTypeList"
ng-value="item.value"
ng-change="goalTypeChanged(item)"
ng-checked="item.selected"
ng-model="data.clientSide">
{{ item.text }}
</ion-radio>
js:
.controller('SettingsCtrl', function($scope, $ionicLoading) {
$scope.goalTypeList = [
{ text: "Dials", value: "dials", selected: true },
{ text: "Conversations", value: "conversations" , selected: false },
{ text: "Appointments", value: "appointments" , selected: false },
{ text: "Orders", value: "orders", selected: false }
];
$scope.data = {
clientSide: 'appointments'
};
$scope.goalTypeChanged = function(item) {
console.log("Selected goalType, text:", item.text, "value:", item.value);
};
The value in your $scope.data = { clientSide: 'ng' }; doesn't match any of the values in $scope.goalTypeList.
If the clientSide value on $scope.data was either dials, conversations, appointments or orders then the radio buttons should then load with one of the radio buttons selected.
I hope this helps.
Like #Marc Harry said your ng-value should be equal ng-model. To make it more dynamic (let's say you get an object from the backend and the selected value may change) you could do following:
<div class="list">
<ion-radio ng-repeat="item in goalTypeList"
ng-value="item.value"
ng-checked="item.selected"
ng-model="data.clientSide">
{{ item.text }}
</ion-radio>
</div>
.controller('SettingsCtrl', function($scope, $ionicLoading) {
$scope.goalTypeList = [
{ text: "Dials", value: "dials", selected: true },
{ text: "Conversations", value: "conversations" , selected: false },
{ text: "Appointments", value: "appointments" , selected: false },
{ text: "Orders", value: "orders", selected: false }
];
$scope.data = {
clientSide: selectedValue()
};
function selectedValue = function() {
for(let i = 0; i < $scope.goalTypeList.length; i++) {
if ($scope.goalTypeList[i].selected) {
return $scope.goalTypeList[i].value;
}
}
};
you can use ion-select also with ionChange event:
<ion-select (ionChange)="checkValue($event)" interface="popover"
placeholder="Select One" >
<ion-select-option *ngFor="let item of userData" [value]="item">
{{item.optionA}}</ion-select-option>
</ion-select>
In your typeScript:
checkValue(event){ console.log(event.detail.value)}

Categories