We Keep Coding

How to coordinate with the checkbox and the displayed drop-down list content using ui-select directive(angularjs)?

<td>
<ui-select ng-model="selectedCountryName">
<ui-select-match placeholder="Enter Country">
<span>Country Selected</span>
</ui-select-match>
<ui-select-choices repeat="countries in vm.countriesList | filter:$select.search track by $index" position='down'>
<div class="filter-box" ng-click="$event.stopPropagation();">
<label class='bx--checkbox__label modal-checkbox-label'>
<input class='bx--checkbox bx--checkbox--svg' type='checkbox' value='{{countries}}' name='{{countries}}' ng-model="checkedCountry[$index].checked" ng-click="vm.toggleData($index,checkedCountry[$index].checked,countries)" />
<span class='bx--checkbox__appearance'>
<svg class='bx--checkbox__checkmark'>
<use xlink:href='images/carbon-theme-ui/sprite.svg#support--check-padding'></use>
</svg>
</span>
<span class='bx--checkbox__label-text'>{{countries}}</span>
</label>
</div>
</ui-select-choices>
</ui-select>
</td>
i have a above td where i have displayed with the list of countries using ui-select directive as i want a checkbox along the dropdown list i have added a carbon-themed checkbox separately along the list of dropdown content.....the checkbox is able to check and pick the content of the list.....
But,the checked checkbox is getting unchecked if i close the dropdown....im not able to able to figure out which is checked and which is not from the checkbox by this behavior....
How can i make the checkbox checked till i uncheck it in this case?

Angular table and HTML Checked Boxes with Disabling Feature in Remaining Checked Boxes

The goal is to have all the checked boxes become disabled when one box is checked. When I use this jquery code below, for some reason it does not work as it does in the SO solution mentioned here.
In this example I am populating a table using a MVC controller in a nodejs and angular stack. When this table displays, there is a checkbox next to each name that prints in the table. Is there a solution to correctly disable the checkboxes being populated in this angular script when one checked box is selected?
html
<table>
<thead>
<th>Names</th>
</thead>
<tr dir-paginate="x in names | filter:search | itemsPerPage:8">
<div class="checkbox" id="nameList">
<td><label><input type="checkbox" name="name" value={{x.name}}> {{ x.name }}</label></td>
</div>
</tr>
</table>
js
$(document).ready(function(){
$('#nameList input[type=checkbox]').change(function(){
if($(this).is(':checked')){
$('#nameList').find(':checkbox').not($(this)).attr('disabled',true);
}else{
$('#nameList').find(':checkbox').attr('disabled',false);
}
});
})

Try using ng-change and ng-model directives of angular to handle all these things.
Refer here https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D.

Here's how you do it using angular's ng-change with ng-disabled. ng-change executes an angular function whenever some changes was made to an input field(in this case, checking and unchecking the checkbox), ng-disabled on the other hand disables the input fields if the condition is true
On your template, put these to your checkbox input tag
<tr dir-paginate="x in names | filter:search | itemsPerPage:8">
<div class="checkbox" id="nameList">
<td>
<label>
<input type="checkbox" ng-disabled="isCBdisabled" ng-model="yourCBmodel" ng-change="cbChanged()" name="name" value={{x.name}}>
{{ x.name }}
</label>
</td>
</div>
</tr>
Then on your angular controller, put this
$scope.isCBdisabled = false;
$scope.cbChanged = function() {
$scope.isCBdisabled = true;
};
So this is what I did, on my controller, I initialized a scope isCBdisabled into false so that it wont disable the checkboxes right away. Then made a function cbChanged() that changes isCBdisabled into true causing the checkboxes to be disabled because of ng-disabled. However, just like i`ve said, it will disable all checkboxes including the selected one so that's another thing to brainstorm.

AngularJS - Radio button not checked

I have an ng-repeat with a bunch of radio buttons inside:
<div class="panel panel-default" ng-repeat="offer in vm.offerList">
...
<td ng-show="offer.edit">
<div class="row">
<input type="radio" name="before" ng-model="offer.before" value="false">
<input type="radio" name="before" ng-model="offer.before" value="true">
</div>
</td>
...
</div>
The model offer.before has the correct value, however, when the row is shown, the radio button doesn't appear checked. Why is this happening? I need the radio button to show the selected value.
This is a fiddle example of my problem: http://jsfiddle.net/danielrvt/dpoLdgjq/

Because anything inside attribute value gets toString() like value true will be considered as 'true' & it will looks for 'true'(string) instead of true(boolean).
Better use ng-value instead of value attribute. It will treat true value as in true of type boolean only.
Additionally in your case you have to add name attribute to be unique for each radio button group each offer element radio will be considered as unique form element.
Markup
<div class="row">
{{offer.before}}
<input type="radio" name="before{{$index}}" ng-model="offer.before" ng-value="false">
<input type="radio" name="before{{$index}}" ng-model="offer.before" ng-value="true">
</div>
Forked Fiddle

ng-repeat checkbox updation into database

Angular code
$scope.delTodo=function() {
$http.post('delete.php',{
stus:$scope.delstatus,
}).then(function(data,status,headers,config) {
});
};
Html code
<li ng-repeat="todo in todocontent track by $index">
<p class="cls-{{todo.inc_id}}">{{todo.todoName}}</p>
<input type="checkbox" ng-model="$parent.delstatus" ng-click="delTodo()" ng-true-value="'{{todo.inc_id}}'" ng-false-value="'{{todo.inc_id}}'" />
</li>
I want to update the database if checkbox is checked or unchecked and also when the checkbox is checked the css of specified text is changed automatically. checkboxes are in ng-repeat loop.
Problem - If the ng-model of checkbox is same then all the checkbox is checked .In this case the database updation work fine. But if I change the ng-model to correct the css part then updation of database not work.

How to add uncheck to last element in ngRepeat Check-Boxex using Angular js?

I am using Check-box model as seen here http://vitalets.github.io/checklist-model/ for check boxes with Angularjs. Some of the Check-boxes need the last check-box element to uncheck all the others. How would I add a ngClick attribute to the last element in a set of Checkboxes using the check-box-model module.

Try Below Solution:
Working Demo
<label ng-repeat="role in roles">
<input ng-click="$last&&mytest()" type="checkbox" checklist-model="user.roles" checklist-value="role.id"> {{role.text}}
</label>
Click on last check box "admin" and it will be alert box

Well I don't know much about checklist-model but you can add ngClick to the last element like this:
<label ng-click={{$last && yourFunction || ''}} ng-repeat="role in roles">
<input type="checkbox" checklist-model="user.roles" checklist-value="role"> {{role}}
</label>
Though, It will add ng-click attribute to all elements but this can work for you. Its an alternative.