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/
Related
I have a list of orders that I sort based on status key. Then I display it using ng-repeat in bars. I can click Accept button to move one order from submitted to accepted. The question is: How do I refresh the bar displaying accepted orders?
HTML
<div class="bar" ng-controller="AdminCtrl">
<li ng-repeat="order in submitted">
<div >
<p >{{order.name}} </p>
<p>{{order.total}}</p>
<button class="btn" ng-click="acceptOrder(order)">Akceptuj</button>
</div>
</li>
</div>
<div class="bar" ng-controller="AdminCtrl" >
<li ng-repeat="order in delivery">
<div >
<p >{{order.name}} </p>
<p>{{order.total}}</p>
<button class="btn" ng-click="addOrderToDeliveryQueue(order)">Dodaj do kolejki dostawy</button>
</div>
</li>
</div>
</div>
JS
$scope.submitted = [];
$scope.accepted = [];
$scope.delivery = [];
angular.forEach($scope.orders, function(value, key) {
if (value.status == 'submitted')
$scope.submitted.push(value);
if (value.status == 'accepted')
$scope.accepted.push(value);
if (value.status == 'delivery')
$scope.delivery.push(value);
});
$scope.acceptOrder = function(order) {
var index = $scope.submitted.indexOf(order);
order.status = 'accepted';
$scope.accepted.push(order);
$scope.submitted.splice(index, 1);
AngularJS handles refreshing ng-repeat directives automatically when it sees a change in the collection. You are not seeing this behavior because you are actually creating multiple independent instances of your AdminCtrl controller. Each of your divs has this: ng-controller="AdminCtrl". This creates a new instance of the AdminCtrl scoped to that div. What you really want is one instance of that AdminCtrl. You can achieve this by moving the ng-controller directive to the outermost container element.
<div ng-controller="AdminCtrl">
<div class="bar">
<li ng-repeat="order in submitted">
// your markup
</li>
</div>
<div class="bar">
<li ng-repeat="order in accepted">
// your markup
</li>
</div>
</div>
// etc.
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 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>
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....