Below is my scenario.
I have 2 checkboxes named A & B which are inside the ng-repeat element. The possible states of these 2 checkboxes are
When A is truthy, B can be either truthy or falsey
When A is falsey, B can never be truthy.
Below is my code which I tried with ng-checked, but as ng-checked doesn't allow ng-model along with it, I couldn't come up with a solution.
NOTE: I need to capture both these 2 checkboxes state in my Model
<tbody>
<tr ng-repeat="vehicle in editor.vehicles">
<td>
<v-check name="A" ng-model="vehicle.modelA"></v-check>
</td>
<td>
<v-check name="B" ng-model="vehicle.modelB" ng-checked="vehicle.modelA"></v-check>
</td>
</tr>
</tbody>
Above code uses a directive v-check which is nothing but a checkbox.
EDIT:
The template of my v-check directive:
<label class='checkbox-inline'><input ng-model='ngModel' type='checkbox'>{{text}}</label>
Thanks in advance.
Below is my solution to the problem, which also fixes the scenario as suggested by #entre in his comment.
<tbody>
<tr ng-repeat="vehicle in editor.vehicles">
<td>
<v-check name="A" ng-model="vehicle.modelA" ng-click="vehicle.modelB=false"></v-check>
</td>
<td>
<v-check name="B" ng-model="vehicle.modelB" ng-disabled="!vehicle.modelA"></v-check>
</td>
</tr>
</tbody>
use ng-disabled for B:
<tbody>
<tr ng-repeat="vehicle in editor.vehicles">
<td>
<v-check name="A" ng-model="vehicle.modelA"></v-check>
</td>
<td>
<v-check name="B" ng-model="vehicle.modelB" ng-disabled="!vehicle.modelA"></v-check>
</td>
</tr>
</tbody>
I already tested this code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example54-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-app="">
<label>Click me to toggle: <input type="checkbox" ng-model="checked"></label><br/>
<input type="checkbox" ng-model="button" ng-disabled="checked">
</body>
</html>
Related
This question might sound very basic to many of you, but please pardon me as I am newbie to angularjs.
Basically what I am trying to do is changing the value of a corresponding textbox on click to its corresponding checkbox.
Here is My Markup Code:
<table class="table table-bordered">
<thead>
<tr>
<th>Select</th>
<th>Name</th>
<th>Phone</th>
<th>No. Of Chits</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="entity in UnassignedMembers ">
<td>
<input type="checkbox" ng-model="entity.isChecked" ng-change="selectEntity(entity)">
</td>
<td>{{ entity.Name}}</td>
<td>{{ entity.PhoneNo}}</td>
<td>
<input type="number" min="1" ng-model="entity.Count">
</td>
</tr>
</tbody>
</table>
I want to assign a value of "1" to the entity. Count on check of entity.isChecked.
You just have to assign valaue to entity.Count like following
$scope.selectEntity = function(entity){
if(entity.isChecked){
entity.Count = 1;
}else{
entity.Count = 0; // or null
}
};
<tr ng-repeat="entity in UnassignedMembers " >
<td><input type="checkbox" ng-model="entity.isChecked" ng-change="selectEntity(entity)"></td>
<td>{{ entity.Name}}</td>
<td>{{ entity.PhoneNo}}</td>
<td><input type="number" min="1" ng-model="entity.Count"></td>
</tr>
You can achieve it even without the function in controller,
HEre is the code.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<table>
<tr>
<td><input type="checkbox" ng-model="entity.isChecked" ng-change="selectEntity(entity);entity.Count = entity.isChecked ? 1 : ''"></td>
<td>{{ entity.Name}}</td>
<td>{{ entity.PhoneNo}}</td>
<td><input type="number" min="1" ng-model="entity.Count"></td>
</tr>
</table>
</div>
</body>
</html>
Please run the above Snippet
Please tell me which value to fill in checkbox. So that I can change the code accordingly.
HERE IS A WORKING DEMO
I have a tree in a table. I would like to know how to add drag and drop functionality to the below tree using angularjs. Any help would be much appreciated. Plunkr added click here.
// html file
<html>
<head>
<script src="angular.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="bootstrap.min.css" />
</head>
<body>
<h1>
Tree Table and Checkbox with AngularJS
</h1>
<hr>
<div class="wrapper" data-ng-app="testApp" data-ng-controller="treeTable">
<table class="table-nested">
<thead>
<tr>
<!-- <th >
<input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" />
</th> -->
<th>
<input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" /> Name
</th>
<th class="cell-members">
Version
</th>
<th>
Size
</th>
</tr>
</thead>
<tbody class="newRepo" style="font-size:12px" data-ng-class="{opened: item.opened}" data-ng-include="'table_tree.html'" data-ng-repeat="item in list"></tbody>
</table>
<script id="table_tree.html" type="text/ng-template">
<tr ng-class="{parent: item.children}" ng-init="parentScope = $parent.$parent; initCheckbox(item, parentScope.item)">
<td class="cell-name" ng-if="level && level > 1">
<span style="padding-left: 30px" > <input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" />
{{item.name}} </span>
</td>
<td class="cell-name top-border" ng-if=" (!level && level <= 1 ) || (level && level <= 1)">
<span style="padding-left:11px" ng-click="item.opened = !item.opened"></span> <input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" />
{{item.name}}
</td>
<td class="cell-name top-border" ng-if="!level">
<span class="indent" ng-click="item.opened = !item.opened"></span> <input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" />
{{item.name}}
</td>
<td class="cell-members top-border">
{{item.Version}}
</td>
<td>
{{item.Size}}
</td>
</tr>
<tr class="children" ng-if="item.children && item.children.length > 0">
<td colspan="3">
<table>
<tbody style="font-size:12px" ng-class="{opened: item.opened}" ng-include="'table_tree.html'" ng-init="level = level + 1" ng-repeat="item in item.children"></tbody>
</table>
</td>
</tr>
</script>
</div>
</body>
</html>
Check out this directive, after trying several of them, I've found that this one is quite flexible, and I've used it successfully in one of my projects:
Angular Drag and Drop
Just for note, I know nothing about angularJS, I worked with knockoutJS before and when it comes to angular I am just making assumptions.
I have code like this:
angular.module("umbraco").controller("recallCtrl",
function ($scope, $routeParams) {
$scope.dcList = {
key: "value",
abc: "aaaa",
prop: "tadaa!"
}
});
and markup as follows:
<div ng-controller="recallCtrl">
<table class="table table-sm">
<thead>
<tr>
<td></td>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tr ng-repeat="(key, value) in dcList">
<td>
</td>
<td>
<input ng-model="key" />
</td>
<td>
<input ng-model="value"/>
</td>
</tr>
</table>
<pre>{{dcList | json}}</pre>
</div>
So shouldn't output of dcList in the end of html change it's values when I edit corresponding inputs which as I assume are bound to object?
If I am doing something wrong, please advise. I want to create object and be able to change its keys and values.
The reason your current code isn't working is because the "key" and "value" variables are scoped within the ng-repeat, and no longer refer directly to the original object.
Keeping the "values" attached is easy, just use dcList[key] instead of value. Adding new keys takes a bit more work; here I've attached an ng-blur to each "key" field which will init a new key when the field blurs. (ng-change would create a new field on every keystroke, which isn't what you want.) Note that when you start typing a new key, its value appears to disappear -- this is because the dcList[key] refers to the new key name immediately. This would be somewhat confusing in a real UI, of course; you'd probably want to code different behavior into the createNewKey function (such copying the old value into the new key, or deleting the original key).
function recallCtrl($scope) {
$scope.dcList = {
key: "value",
abc: "aaaa",
prop: "tadaa!"
}
$scope.createNewKey = function(k) {
$scope.dcList[k]="";
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="recallCtrl">
<table class="table table-sm">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tr ng-repeat="(key, value) in dcList">
<td>
<input ng-model="key" ng-blur="createNewKey(key)"/>
</td>
<td>
<input ng-model="dcList[key]"/>
</td>
</tr>
</table>
<pre>{{dcList | json}}</pre>
</div>
please test this code, change in the value corresponding to the key,
angular.module('app', [])
.controller('Controller', function($scope) {
$scope.dcList = {
key: "value",
abc: "aaaa",
prop: "tadaa!"
}
})
<!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="Controller">
<table class="table table-sm">
<thead>
<tr>
<td></td>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tr ng-repeat="(key, value) in dcList">
<td>
</td>
<td>
<input ng-model="key" disabled/>
</td>
<td>
<input ng-model="dcList[key]" />
</td>
</tr>
</table>
<pre>{{dcList | json}}</pre>
</div>
</body>
</html>
Here is the plunker
When I check master check-box all the children check-box should be checked and their content should also be shown when check-box is checked otherwise their content should not be shown but the issue is that child check-boxes are checked but their content is not shown when I check master check-box if I check child check-box manually its content is shown.
<!DOCTYPE html>
<html>
<head>
<title>Angular Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body data-ng-app="">
<table>
<tr>
<td>
<input type="checkbox" data-ng-model="parent"/>
</td>
<td data-ng-show="parent" class="left">
It's master
</td>
</tr>
<tr>
<td>
<input type="checkbox" data-ng-model="child_1" data-ng-checked="parent"/>
</td>
<td data-ng-show="child_1">
It's child 1
</td>
</tr>
<tr>
<td>
<input type="checkbox" data-ng-model="child_2" data-ng-checked="parent"/>
</td>
<td data-ng-show="child_2">
It's child 2
</td>
</tr>
</table>
</body>
</html>
I have solved the issue.
<input type="checkbox" data-ng-model="parent" data-ng-change="child_1= parent;
child_2=parent;" />
Please click here to see the code.
You are not interacting with the child model - you are setting the checked property directly from the parent.
Instead, handle ng-checked for your parent:
<input type="checkbox" data-ng-model="parent" ng-checked="parentChanged()"/>
And in your controller set the model of each child to parent value:
$scope.parentChanged = function(){
child_1 = parent;
child_2 = parent;
}
Also remove data-ng-checked="parent" from the children nodes your view.
<input type="checkbox" data-ng-model="child_1">
...
<input type="checkbox" data-ng-model="child_2">
You must set the property "child_1" like this :
<input type="checkbox" data-ng-model="child_1" data-ng-checked="child_1 = parent"/>
You can see how to do it : Here
All other browsers, including IE8, render the form correctly, except IE7; I assume IE6 exibits same problem.
IE7 cuts-off, shrinks the form, and shows about 5% of the input fields;
I removed all css formatting but not change; I have applied several related fixes without success; help or direction as to where to find related information or know fixes is welcome since it has consumed much time without success; thanks;
html is included below;
<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>IMM log-in</title>
</head>
<body>
<form method="post" name="form" id="form" action="/imm/login.htm" style=
"font-family:arial;font-size:9pt;padding:5px;table.horizontal-align:left;display:inline;">
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td><label>log-in ID</label><span class="required">*</span></td>
<td align="left">
<input type="text" name="name" id="form_name" value="" size=
"20" style="width:100%;" />
</td>
</tr>
<tr>
<td align="left"><label>password</label><span class="required">*</span></td>
<td align="left">
<input type="password" name="password" id="form_password"
value="" size="20" style="width:100%;" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="left">
<table class="buttons" id="form-buttons">
<tbody>
<tr class="buttons">
<td class="buttons"><input type="submit" name="ok" id="form_ok" value=
" OK " /></td>
<td class="buttons"><input type="submit" name="cancel" id="form_cancel"
value="Cancel" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
</pre>
Found a solution for this thing position:relative