We Keep Coding

Vue: Rendered list show selected checkboxes

I try to display my selected checkboxes, which I render like this:
<pre>{{ JSON.stringify(selectedAttributes, null, 2) }}</pre>
<ul
class="list-unstyled"
v-for="category in categories"
:key="category.name"
>
<strong>{{ category.category_name }} </strong>
<li
v-for="attributes in category.attributes"
:key="attributes.attribute_id"
>
<Field
as="input"
name="attribute"
type="checkbox"
class="form-check-input"
v-model="selectedAttributes"
:id="attributes.attribute_id"
:value="attributes.attribute_id"
/>
<label class="form-check-label" for="attributes.attribute_id">
{{ attributes.attribute_name }}
</label>
</li>
</ul>
...
data() {
return {
selectedAttributes: [],
};
},
Unfortunately, the attribute_id of my selected checkboxes is not showing. Where is my mistake?
Update: The data from my api looks like this:
What I need here is, I want the user to check his preferred options and display the selected options in the JSON.stringify. The selectedAttributes should display the attribute_id of the chosen option.

Your data does not have attribute_id id property at all. Only attribute_name you can see at the image you provided

Get the list of all selected check boxes with Vue.js

How can I get a list of all check boxes that I selected with Vue?
This is my HTML which works and shows me a list of my products with a checkbox.
<li v-for="(product, index) in products">
<input :id="product.slug" :value="product.id" name="product" type="checkbox" />
<label :for="product.slug"><span></span></label>
</li>
What I want is that when I click on a button, it fetches all check boxes that I selected. And give me all the values.
But I can't figure out how to do it, because it'll break when I even try to add a v-model to the checkbox.

Just bind every checkbox value with a product and the v-model to the array checkedProducts
<li v-for="(product, index) in products">
<input :id="product.slug" :value="product" name="product" type="checkbox" v-model="checkedProducts" />
<label :for="product.slug"><span></span></label>
</li>
...
data(){
return{
...
checkedProducts:[]
....
}
}

How to get radio button selected value from dynamically generated radio buttons?

Hi I am developing web application in angularjs. I am generating radiobuttons dynamically using ng-repeat as below.
<ul>
<li ng-repeat="level in permissions">
<input name="level.perm_levelname" type="radio" ng-model="level.perm_levelname" value="{{level.perm_levelname}}"> {{level.perm_levelname}}
<a ng-click="gotopermMap({permisssionID: level.id})">View</a>
</li>
</ul>
<input type="button" value="APPLY" ng-click="apply()" />
I am trying to get selected radio button as below.
$scope.apply=function()
{
var permname = $scope.name;
console.log($scope.level.perm_levelname);
}
I am getting error Cannot read property 'perm_levelname' of undefined. May i get help here to get selected radio button? Thank you

group radio buttons by a name and specify a common scope variable for radio buttons ng-modal
<ul>
<li ng-repeat="level in permissions">
<input name="myradiobtn" type="radio" ng-model="myradioBtnValue" ng-value="level.perm_levelname">
{{level.perm_levelname}}
<a ng-click="gotopermMap({permisssionID: level.id})">View</a>
</li>
</ul>
<input type="button" value="APPLY" ng-click="apply()"/>

Use ng-click event for radio button to get current selected value and assign the value a scope object. then get the value from saved scope abject while you click apply button.
DEMO:
function TodoCtrl($scope) {
$scope.permissions= [{perm_levelname:"hai"},{perm_levelname:"bye"},{perm_levelname:"come"},{perm_levelname:"go"}]
$scope.apply=function()
{
alert($scope.currecntClickValue);
}
$scope.currecntClick=function(currecntClickValue)
{
$scope.currecntClickValue=currecntClickValue.perm_levelname;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<h2>Todo</h2>
<div ng-controller="TodoCtrl">
<ul>
<li ng-repeat="level in permissions">
<input name="groupName" type="radio" ng-click="currecntClick(level)" ng-value="level.perm_levelname">
{{level.perm_levelname}}
View
</li>
</ul>
<input type="button" value="APPLY" ng-click="apply()"/>
</div>
</div>

you should use radio button group like this--
<ul>
<li ng-repeat="level in permissions">
<input name="btnGroup" type="radio" ng-model="radioButtonValue" value="{{level.perm_levelname}}">
{{level.perm_levelname}}
<a ng-click="gotopermMap({permisssionID: level.id})">View</a>
</li>
</ul>
<input type="button" value="APPLY" ng-click="apply()"/>
And inside of Controller-
$scope.radioButtonValue='';
$scope.apply=function()
{
var permname = $scope.name;
console.log($scope.radioButtonValue);
}

Mapping objects in ng-value and ng-model (Angularjs)

An old code to display the radio boxes on angular side was written like this before:
<label ng-repeat="item in items" class="col-xs-3">
<input type="radio" name="{{item.name}}"
value="{{item}}"
ng-change="saveRadio(x,y,z)"
ng-model="data[item.name]">
{{item.name}}
</label>
The problem was item is an object and the function saveRadio used to save the object in text format. We tried substituting the value with ng-value as below. Now preselection of saved answer is not happening. Code is shown below:
<label ng-repeat="item in items" class="col-xs-3">
<input type="radio" name="{{item.name}}"
ng-value="item"
ng-change="saveRadio(x,y,z)"
ng-model="data[item.name]">
{{item.name}}
</label>
The scope variable data has the array of answers map.
Am I missing something here or is there something more to be added for Object comparison?

Figured this out, apparently ng-model and ng-value can store objects but doesn't do object comparison. Adding a ng-checked with the unique value will preselect the radiobox like so:
<label ng-repeat="item in items" class="col-xs-3">
<input type="radio" name="{{item.name}}"
ng-value="item"
ng-checked="item.option == data[item].option)"
ng-change="saveRadio(x,y,z)"
ng-model="data[item.name]">
{{item.name}}
</label>

You can achieve the goal with this approach also:
$scope.items = [{id:1,name:"first"}];
$scope.savedAnswer = {id:1,name:"first"};
var index = $scope.items.map(function(obj, index) {
if(obj.name == $scope.savedAnswer.name) {
return index;
}
}).filter(isFinite);
$scope.preselectedAnswer = $scope.items[index];
View
<label ng-repeat="item in items" class="col-xs-3">
<input type="radio" name="{{item.name}}"
ng-value="item"
ng-change="saveRadio(x,y,z)"
ng-model="preselectedAnswer">
{{item.name}}
</label>
plunker : http://plnkr.co/edit/83atxi7JGtyBSlRqK2xo?p=preview

AngularJs: How to use ng-repeat object in ng-model as sub string. to generate dynamic ng-model

I want to use ng-repeat object in ng-model value as sub string.. can i use this?? My scenario is:
<form id="booking_form" name="booking_form" ng-app="myApp" ng-submit="tasksubmit()">
<ul class="items-list">
<li ng-repeat="task in taskslist | filter:query | orderBy:orderProp" class="items-list-item">
<div class="items-list-item-image">
<p>
<input type="checkbox" ng-model="tasksubmit{{task.id}}" />
</p>
</div>
<div class="items-list-item-detail">
<p>
<strong>{{task.title}}</strong>
</p>
</div>
</li>
</ul>
</form>
in < input type = checkbox > i want to generate dynamic ng-model with prefix of tasksubmit (this is initialized in controller as $scope.tasksubmit = {} ). Any body please help me out in this problem.....

If I understand correctly you want all task.id as property inside your tasksubmit object as you have initialized it as object in your controller so you can do as below:
<input type="checkbox" ng-model="tasksubmit[task.id]" />

Just add model with ngRepeat's instance property
Like this
<li ng-repeat="task in taskslist | filter:query | orderBy:orderProp" class="items-list-item">
<input type="checkbox" ng-model="task.isChecked" />
</li>
You'll find value of isChecked from $scope.taskslist
JSFIDDLE