I have questioner form, in their question have multple options. how to get user selected options?
Here is the code?
...
<ul>
<li ng-repeat="question in questionPaper.questions">
<div>{{question.description}}</div>
<ul>
<li ng-repeat="option in question.options">
<span>
<input type="radio" name="option_question_{{question.id}}" ng-model="option.id"/>
{{option.description}}
</span>
</li>
</ul>
</li>
</ul>
...
How to get option values as
{question_paper_id: 1, answers: [{question_id: 1, options_id: 23}, {question_id: 2, options_id: 21}, {..}] }
Here is my code in plnkr http://plnkr.co/edit/OTDsUUCiDGYfxJ2AMzFR
Basically, you can dynamically add a property when the radio button is selected:
<input type="radio" ng-model="question.selected_id" ng-value="option.id"/>
$scope.selected_ids = [];
$scope.submitAnswers = function() {
angular.forEach($scope.questionPaper.questions, function(question) {
$scope.selected_ids.push(question.selected_id);
});
}
Take a look at the demo: http://plnkr.co/edit/QG8XP0jfjyJPY1xaXx6d?p=preview
everything else seems to fine. just replace your script tag for including angular with this
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
Related
I am new to AngularJS. I am trying to get the checkbox to appear as checked from previously selected value. I thought ng-class would do the trick but it's not. Did I do anything wrong in the code below?
Here is my HTML code:
<ul class="dropdown-menu menu-content" uib-dropdown-menu>
<li ng-repeat="value in values" >
<label><input type="checkbox" ng-class="{'checked' : value.selected, 'active' : value.selected}" ng-click="$ctrl.toggleValue(value)">{{value.valueName}}</label></li>
</ul>
<body>
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
// dummy data
$scope.value = 1; // some value
});
</script>
<div ng-app="myShoppingList" ng-controller="myCtrl">
<input type="checkbox" ng-checked="value === 1">
</div>
</body>
Use inbuilt ng-checked directive of angular.
I want to Drag and drop sorting of table rows in priority order.
When checkbox checked will be moved into this div class :
<div class="table-test">
<ul>
{{-- for checkbox checked --}}
</ul>
</div>
My html with static checkbox.
<div class="test__list__checkbox checkbox-test">
<ul>
<li>
<div class="form--checkbox__wrapper">
<span class="priority"></span>
<input type="checkbox" id="checkbox-11" class="checkbox--input">
<label for="checkbox-11" class="checkbox--label">Mandarin Test</label>
</div>
</li>
<li>
<div class="form--checkbox__wrapper">
<span class="priority"></span>
<input type="checkbox" id="checkbox-12" class="checkbox--input">
<label for="checkbox-12" class="checkbox--label">Accounting Test</label>
</div>
</li>
<li>
<div class="form--checkbox__wrapper">
<span class="priority"></span>
<input type="checkbox" id="checkbox-13" class="checkbox--input">
<label for="checkbox-13" class="checkbox--label">TOEFL</label>
</div>
</li>
<li>
<div class="form--checkbox__wrapper">
<span class="priority"></span>
<input type="checkbox" id="checkbox-14" class="checkbox--input">
<label for="checkbox-14" class="checkbox--label">Color Blind Test</label>
</div>
</li>
<li>
<div class="form--checkbox__wrapper">
<span class="priority"></span>
<input type="checkbox" id="checkbox-15" class="checkbox--input">
<label for="checkbox-15" class="checkbox--label">Basic Home</label>
</div>
</li>
</ul>
And this is my function
function moveCheck(){
$(document).ready(function() {
//Helper function to keep table row from collapsing when being sorted
var fixHelperModified = function(e, li) {
var $originals = li.children();
var $helper = li.clone();
$helper.children().each(function(index)
{
$(this).width($originals.eq(index).width())
});
return $helper;
};
//Make diagnosis table sortable
$(".table-test ul").sortable({
helper: fixHelperModified,
stop: function(event,ui) {renumber_table('.table-test')}
}).disableSelection();
});
//Renumber table rows
function renumber_table(tableID) {
$(tableID + " li").each(function() {
count = $(this).parent().children().index($(this)) + 1;
console.log(count);
$(this).find('.priority').html(count);
});
}
var checkedList = $('.table-test ul');
var unCheckedList = $('.checkbox-test ul');
var checkBoxInput = $('.checkbox--input');
$('.checkbox--input').change(
function(){
if (this.checked){
$(this).closest('li').appendTo(checkedList);
renumber_table('.table-test');
}
else if (!this.checked){
$(this).closest('li').appendTo(unCheckedList);
renumber_table('.table-test');
}
});
}
This is working just fine,
but When I change to checkbox dynamic with v-for vue js it doesn't work, I don't know why. Like this:
<div class="test__list__checkbox checkbox-test">
<ul>
<li v-for="test_list in dt_test_list">
<div class="form--checkbox__wrapper">
<span class="priority"></span>
<input type="checkbox" id="checkbox-#{{ test_list.id }}" class="checkbox--input">
<label for="checkbox-#{{ test_list.id }}" class="checkbox--label">#{{ test_list.type }}</label>
</div>
</li>
</ul>
Anyone help me? Many thanks
it seems document ready is fired up before your vue instance.
so you just need to use vue's ready method to initialize your sort-able code logic.
first all data will load and then you can use.
new Vue({
el: 'body',
ready:function(){
this.initializeSortable();
},
methods: {
initializeSortable: function() {
// your all code here after vue instance is ready and loop is done
}
});
this is our first step for all element which will come pre-loaded.
now if you add new element you need to compile vue's html to make that html behave like vue component.
addNewElement: function(){
var element = $('#app').append('<div>some html variable</div>');
/* compile the new content so that vue can read it */
this.$compile(element.get(0));
},
here your element will be your new append element.
however in vue they said this on the fly creation / compilation is not good practice.
I want to alert check box value one by one. I have 5 checkbox in the list. I want to get value of selected check box.
View
<ul class="ul-list-10">
<li ng-repeat="assetType in assetTypeList">
<input type="checkbox" ng-model="assetType.checked" ng-click="fnChangeAssetType(assetType)" value="{{assetType.Id}}" />
</li>
</ul>
JS
angular.forEach($scope.assetTypeList, function (item) {
//put your code here
});
By the way ,you can take value on click
Angularjs code:
var app = angular.module('myapp',[]);
app.controller('myctrl',function($scope){
$scope.assetTypeList=[{id:1,checked:false},{id:2,checked:false},{id:3,checked:false},{id:4,checked:false}];
$scope.fnChangeAssetType=function(val){
alert(val.id);
}
});
HTML
<div ng-app="myapp" ng-controller='myctrl'>
<ul class="ul-list-10">
<li ng-repeat="assetType in assetTypeList">
<input type="checkbox" ng-model="assetType.checked" ng-click="fnChangeAssetType(assetType)" value="{{assetType.id}}" />
{{assetType.id}}
</li>
</ul>
</div>
jsFiddle For solution:http://jsfiddle.net/kLrvs4ty/1/
I have a list of items ("locals" array) which I show in a list
<ul class="list-group">
<li ng-repeat="loc in locals" class="list-group-item"><a href="" data-id={{loc.ID}}>{{loc.location}}</a>
</li>
</ul>
I want the user to be able to select an item, and then to use this item in code.
What is the preferred way to do it.
Also I am creating the application for mobile, so I should be able to know that the user chose this item in mobile( and not just use mouseclick for example).
You can make use of angular js ng-click event (on the li item where ng-repeat is and do something like this: fiddle
code snippet of controller:
function MyCtrl($scope) {
$scope.templateList = [{id:1, name: 'Template1'}, {id:2, name: 'Another Template'}]
$scope.template = {};
$scope.setValue = function(list) {
$scope.template.template_id = list.id;
$scope.template.template_name = list.name;
}
}
Of HTML:
<div ng-app>
<form ng-controller="MyCtrl">
<input type="hidden" name="template_id" ng-model="template.template_id" />
<input type="text" name="template_name" ng-model="template.template_name" />
<ul>
<li ng-repeat="list in templateList" ng-click="setValue(list)">{{list.name}}</li>
</ul>
</form>
</div>
Try this:
In html,
<ul class="list-group">
<li ng-repeat="loc in locals" class="list-group-item">
<a href="" data-id={{loc.ID}} ng-click="selectLoc(loc.location)">
{{loc.location}}
</a>
</li>
</ul>
In JS,
$scope.selectLoc = function(location){
console.log(location);
//Here you will get the selected location.
var SomeVar = location;
}
Hope this helps....
it was a very simple but don't no why i can't solve it.
I am trying to convert string to integer from json, it converts 1st object but from second object it doesn't:
HTML:
<body ng-controller="myApp">
<ul ng-repeat="vals in json_arr" ng-init="parseId(vals)">
<li>
<input type="number" ng-model="vals.id" />
</li>
<li>
<input type="number" ng-model="vals.id1" />
</li>
<li>
<input type="number" ng-model="vals.id2" />
</li>
</ul>
</body>
Controller:
app.controller('myApp', function($scope) {
$scope.json_arr = [{
'id': '1',
'id1': '2',
'id2': '3'
}];
$scope.parseId = function(val) {
val.id = parseInt(val.id);
}
});
DEMO PLUNKER
Aahhhhh that's my mistake, In parseId function i only parse val.id.
The correct 1 is:
$scope.parseId = function(val) {
val.id = parseInt(val.id);
val.id1 = parseInt(val.id1);
val.id2 = parseInt(val.id2);
}
change your code with this one
$scope.parseId = function(val) {
val.id = parseInt(val.id);
val.id1 = parseInt(val.id1);
val.id2 = parseInt(val.id2);
}
or you can change your json_arr variable than you don't need to change string to int
$scope.json_arr = [{
'id': 1,
'id1': 2,
'id2': 3
}];
Directives are executed in order from highest priority to lowest priority when defined on the same element. ng-repeat has a directive priority level of 1000, but ng-init has a directive priority of 450. ng-repeat also has a terminal property - meaning it is the last directive to execute, and no other directives can execute after it. There-in lies the problem. The ng-repeat executes first, and because it is terminal, it will not allow ng-init to execute after.
To solve this, move the ng-init to the first li below:
<body ng-controller="myApp">
<ul ng-repeat="vals in json_arr">
<li ng-init="parseId(vals)">
<input type="number" ng-model="vals.id" />
</li>
<li>
<input type="number" ng-model="vals.id1" />
</li>
<li>
<input type="number" ng-model="vals.id2" />
</li>
</ul>
</body>
This works because ng-model has a priority of 0, so it will execute after ng-init.
[EDIT]
I realized there is a logic error in the code you posted. The other two answers have already addressed it, but I'll post it again here for completeness:
$scope.parseId = function(val) {
val.id = parseInt(val.id);
val.id1 = parseInt(val.id1);
val.id2 = parseInt(val.id2);
}