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

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)}

Related

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

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;
}
}
});

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>

Dynamically add attributes as object properties

I'm working on bootstrap-multiselect, I'm trying to add data attributes in the dataprovider method.
Current
var options = [
{label: 'Option 1', title: 'Option 1', value: '1', selected: true},
{label: 'Option 2', title: 'Option 2', value: '2'}];
In the code it maps these an <option> tag like so:
$tag = $('<option/>').attr({
value: option.value,
label: option.label || option.value,
title: option.title,
selected: !!option.selected,
disabled: !!option.disabled
});
Desired
var options =[
{
"label": "Item 1",
"value": 1,
"selected": false,
"attributes": [
{
"some-attribute": 10001
},
{
"another-attribute": "false"
}
]
}
]
So it will render on the HTML element as data-some-attribute="10001" data-another-attribute="false".
I started out adding this to the code (which I know won't work):
$tag = $('<option/>').attr({
value: option.value,
label: option.label || option.value,
title: option.title,
selected: !!option.selected,
disabled: !!option.disabled,
forEach(option.attributes, function(attribute){
})
});
The problem of course is you can't add a loop as an objects properties.
Once this is working I can add a pull request to the repository. I did ask a question on the repo but decided to try and tackle it myself Issue #592
Any ideas?
I would suggest changing attributes from an array to an object, since attribute names should be unique. It also simplifies how you would get the data attributes on the element.
var attributes = {
value: option.value,
label: option.label || option.value,
title: option.title,
selected: !!option.selected,
disabled: !!option.disabled
};
for (key in option.attributes) {
attributes['data-' + key] = option.attributes[key];
}
$tag = $('<option/>').attr(attributes);
If you wanted to keep it as an array, you can do the following:
var attributes = {
value: option.value,
label: option.label || option.value,
title: option.title,
selected: !!option.selected,
disabled: !!option.disabled
};
for (var i = 0; i < option.attributes.length; i++) {
var key = Object.keys(option.attributes[i])[0],
val = option.attributes[i][key];
attributes['data-' + key] = val;
}
$tag = $('<option/>').attr(attributes);
Doing this, however, provides no benefit and introduces complexity. If each object can have multiple keys, the code will need to change further.
You need to create the element first then add the attributes to it.
So your code should be like this:
var options = [{
"label": "Item 1",
"value": 1,
"selected": false,
"attributes": [{
"some-attribute": 10001
}, {
"another-attribute": "false"
}]
}]
console.log(options.length);
$.each(options, function(option) {
var $tag = $('<option/>').attr({
value: options[option].value,
label: options[option].label || options[option].value,
title: options[option].title,
selected: options[option].selected,
disabled: options[option].disabled
});
console.dir(option);
$.each(options[option].attributes, function(att) {
$tag.attr("data" + Object.keys(att)[0], att[0])
});
$("#mySelect").append($tag);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mySelect">
</select>

AngularJS ngOptions filter array by boolean field

I have this array:
this.chapters = {
1: { name: 'Chapter 1', show: false },
2: { name: 'Chapter 2', show: true },
3: { name: 'Chapter 3', show: true }
};
And I want to show only chapters whose show value is true in this select
<select ng-model="cart.newchapter"
ng-options="v.name for (k, v) in cart.chapters"></select>
Now it's showing all chapters, but I need to filter them. I've been trying to apply filter but It didn't work. Can you help me? Oh! I can't change boolean type of.
You cannot apply filters to Objects, only to Arrays. So, you have 2 options here, change chapters to an Array or pre-filter the chapters Object using a function like this:
$scope.filter = function(chapters) {
var result = {};
angular.forEach(chapters, function(chapter, key) {
if (!chapter.show) {
return;
}
result[key] = chapter;
});
return result;
};
And on the HTML:
<select ng-model="newchapter" ng-options="v.name for (k, v) in filter(chapters)"></select>
angular.module('app', [])
.controller('Ctrl', function($scope) {
$scope.chapters = {
1: {
name: 'Chapter 1',
show: false
},
2: {
name: 'Chapter 2',
show: true
},
3: {
name: 'Chapter 3',
show: true
}
};
$scope.filter = function(chapters) {
var result = {};
angular.forEach(chapters, function(chapter, key) {
if (!chapter.show) {
return;
}
result[key] = chapter;
});
return result;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
<select ng-model="newchapter" ng-options="v.name for (k, v) in filter(chapters)"></select>
</div>
You need a custom filter as built-in filter would not work with object (your chapters is object), here is a custom filer you could use
app.filter('objFilter',function($filter){
return function(items,toFilter){
var values=[];
Object.keys(items).forEach(function(v){
values.push(items[v]);
});
return $filter('filter')(values,toFilter);
};
});
<select ng-model="cart.newchapter"
ng-options="v.name for (k, v) in chapters | objFilter:{show:true} "></select>

AngularJS input.radio initial selection

I'm trying to initialise/select a particular radio button within a group. I want to pass in an index number to an attribute called "selected-item".
HTML
<div class="top">
<radio-buttons model="colour" selected-item="1" items='colours'></radio-buttons>
<div>{{colour}}</div>
</div>
<div class="center">
<radio-buttons model="day" selected-item="2" items='days'></radio-buttons>
<div>{{day}}</div>
</div>
<div class="bottom">
<radio-buttons model="phone" selected-item="3" items="phones"></radio-buttons>
<div>{{phone}}</div>
</div>
Directive:
directives.directive('radioButtons', function () {
return {
restrict: 'E',
scope: {
model: '=',
items: '=',
selectedItem: '#'
},
templateUrl: 'template/radio-group.html',
link: function(scope) {
console.log(scope.selectedItem);
scope.onItemChange = function(item) {
console.log(item);
scope.model = item;
};
}
};
});
Template: radio-group.html:
<div ng-repeat='item in items'>
<input
type="radio"
name="{{item.group}}"
ng-value="{{item.value}}"
ng-model="model"
ng-change="onItemChange(item)"/>
{{item.text}}
</div>
Controller
$scope.colours= [ {
text: "Pink",
value: 5,
group: "colourGroup",
img: 'app/img/icon.jpg'
}, {
text: "Yellow",
value: 6,
group: "colourGroup",
img: 'app/img/icon.jpg'
}, {
text: "Blue",
value: 7,
group: "colourGroup",
img: 'app/img/icon.jpg'
}, {
text: "Green",
value: 8,
group: "colourGroup",
img: 'app/img/icon.jpg'
}
];
$scope.days = [ {
text: "Monday",
value: 9,
group: "dayGroup"
}, {
text: "Tuesday",
value: 10,
group: "dayGroup"
}, {
text: "Wednesday",
value: 11,
group: "dayGroup"
}, {
text: "Thursday",
value: 12,
group: "dayGroup"
}
];
$scope.phones = [ {
text: "Android",
group: "phoneGroup",
value: 13
}, {
text: "iOS",
group: "phoneGroup",
value: 14
}, {
text: "Blackberry",
group: "phoneGroup",
value: 15
}];
Any help would be fantastic!
Cheers.
Try changing ng-value="{{item.value}}" to value="{{item.value}}".
Then add ng-checked="$index == (selectedItem - 1)" to the input in the template.
Alternatively: ng-checked="$index == (selectedItem - 1) || $first" or with $last, if you want it to select something if you try an index that is out of range.
Without using value, here is another solution:
link: function(scope) {
scope.model = angular.copy(scope.items[scope.selectedItem -1]);
var setSelected = function(v) {
var i = 0;
for(; i < scope.items.length;i++) {
if(scope.items[i].value === v) {
return scope.items[i];
}
}
}
scope.$watch('model.value',function(v) {
//because the value is out of sync with the model, have to reset the model
scope.model = angular.copy(setSelected(v));
});
}
Note that ng-value has to be a string, and therefore ng-model. scope.model is only exposed as scope in your directive, so am using scope.model.value
<div ng-repeat='item in items'>
<input
type="radio"
name="{{item.group}}"
ng-value="{{item.value}}"
ng-model="model.value" />
{{item.text}}
</div>

Categories