I'm trying to make a check box that should be ticked when a value from the controller is filled (!= null).
It also need to be able to be ticked off and on, but I can't get it to work:
<input type='checkbox'
ng-false-value="''"
ng-model="entry[element.propertyName]"
id="q{{element.id}}"
ng-checked="entry[element.propertyName] != ''"
>
The check box is ticked when entry[element.propertyName] is filled, so far so good. But when I untick the check box the model remains unchanged, even though I've set ng-false-value, and the 'selected=selected' attribute doesn't disappear. When I tick and untick again, then the model starts to change to true and ''
Should be the easiest thing in the world, what am I missing here?
I'm using Angular 1.3.11
I have no idea why you are using ng-false-value, never saw that before.
Here is a snippet with a button updating a checkbox.
function testCtrl($scope){
// Initialise the checkbox as unckecked
$scope.testIsChecked=false;
// This function makes the checkob checked
$scope.makeItCHecked = function(){
$scope.testIsChecked=true;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="testCtrl">
<div><input type="checkbox" ng-model="testIsChecked">
$scope.testIsChecked value : {{testIsChecked}}</div>
<button ng-click="testIsChecked=true">Make it checked</button>
</div>
</div>
See this link for explanation.
You can include the array in an object like:
public class objElement
{
string[] propertyName;
}
and then bind to your checkbox.
Related
I'm generating check boxes using ng-repeat, and their initial status can be checked or unchecked depending on if that information exists or not in the data. My problem is that altghough it shows their initial checked/unchecked status correctly, when I uncheck a box that has been 'pre-checked', the box physically unchecks but the model doesn't change. Then I check it again, and the model doesn't change but it's correct. Then I uncheck again, and it clears correctly in the model and works correctly from then on. I have been working on this problem for days and I'm totally stuck! Can anyone see if I'm doing something stupid? My feeling is that it's an initialisation problem but I'm too close to it to see now. Thanks!
<!-- if this is a checkbox to be drawn -->
<div ng-if="option.option_type=='checkbox'">
<label class="item-checkbox-right">
{{option.caption}}
<!-- handle multiple options -->
<!-- if answered_options[n]weight exists, make option.ans = weight --></label>
<ul ng-repeat="opti in questionpart.survey_answer[0].answered_options">
<li style="list-style: none; display: inline">
<!-- if option is set in the received data, set it in the model -->
<div ng-if="opti.id == option.id">
<div ng-init="option.ans = option.weight"></div>
</div>
</li>
</ul>
<label class="item-checkbox-right">
<!-- show the checkbox and bind to option.ans-->
<input class="checkbox-light"
type="checkbox"
name="{{questionpart.id}}"
ng-false-value="0"
ng-true-value="{{option.weight}}"
ng-model="option.ans"
ng-checked="option.ans==option.weight" />
</label>
</div>
Here is a simple, but not pretty example. Using the default Angular directives for checkboxes never quite worked for me.
app.js
$scope.data = [{checkboxValue: 0}, {checkboxValue: 1}, {checkboxValue: 2}];
$scope.dataCopy = angular.copy( $scope.data );
$scope.setCheckboxValue = function( checkbox, index ) {
checkbox.checkboxValue = checkbox.checkbox ? $scope.dataCopy[index].checkboxValue : 0;
}
$scope.parseCheckboxes = function() {
for( var i = 0, len = $scope.data.length ; i < len ; i++ ) {
$scope.data[i].checkbox = $scope.data[i].checkboxValue > 0 ? true : false;
}
}
$scope.parseCheckboxes();
Basically what I do at the controller is handling the logic for checkboxes all by myself. I create a copy of the array so that when we toggle from false to true, we get the initial value.
I make an additional key in every object which keeps track of the status of the checkbox (true or false) so it doesn't interfere with the actual value.
The initial marking is done by parsing the array of objects and setting all the checkboxes to true or false depending on their values.
html
<body ng-controller="MainCtrl">
<label ng-repeat="d in data track by $index">
<input type="checkbox" ng-model="d.checkbox" ng-change="setCheckboxValue(d, $index )" />
{{d.checkbox}}
{{d.checkboxValue}}
<br>
</label>
</body>
The html part is pretty self explanatory.
There probably is better ways to solve this, but this is the solution I came up with. Not pretty, but it works.
when i close the ngdialog popup after checking the checkbox which is inside of it, and again if i open it then the checkbox is getting unchecked, why is it happening do anybody know that?
this is my script tag
<script type="text/ng-template" id="templateId">
<div id="target" ng-click="test()" ng-controller="tt">
Click here
<input type='checkbox' placeholder=''>
</div>
</script>
this is my example jsfiddle http://jsfiddle.net/mb6o4yd1/264/
It seems that this ngDialog module destroys the controller after it is closed. If you want to access and keep the changes in your controller. Use $parent from your controller.
I've created this fiddle for you.
<script type="text/ng-template" id="templateId">
<div id="target" ng-click="test()">
Click here
<input type='checkbox' ng-model="$parent.checkbox">
</div>
OR
Using your approach you have to save the values into a factory before leaving the dialog
Hope it helps.
You need to declare a model on your checkbox, eg:
Then you need to copy that value to the scope of you choosing when the dialog is closed, so that when the modal dialog is opened again, it can access that value (provided it is available). The scope of the modal dialog will be disposed when the dialog is closed, so you cannot save its state there.
Bind a model which holds the checkbox value and have it in your parent controller. This would fix your issue.
I'm currently upgrading our app version of angular js from 1.0.8 to the latest stable release and running into an interesting issue.
We have a set of checkboxes used to filter information, in general the options are:
All
Filter 1
Filter 2
Filter N
The desire is to have the 'All' checkbox when clicked, remain checked. It will do additional logic to determine if the other checkboxes are checked and toggle their checked states off if they are. I was able to accomplish this with 1.0.8, but not with the latest version of angular.
At its most basic of setup, we just have a single checkbox, with a ng-model value set to some boolean scope variable and a ng-click defined to some function.
I have a plunker demo where one can toggle between 1.0.8 and 1.2.18 to illustrate the change, here: http://plnkr.co/edit/WaTj6e33x4SZ2NkKStsC?p=info
HTML:
<body ng-app='example' ng-controller="mainCtrl">
<h1>Hello Plunker!</h1>
<button type="button" ng-click="toggleCb(true)">All Checked</button>
<button type="button" ng-click="toggleCb(false)">All Unchecked</button>
<div>
<input type="checkbox" ng-model="allCheckbox" ng-click="toggleCb(true)" id="all"/>
<label for="all">All</label>
</div>
<div>Imagine more checkbox options</div>
<div>
<p>Value for checkbox is: {{ allCheckbox }}</p>
</div>
</body>
JS:
angular.module('example', [])
.controller('mainCtrl', function($scope) {
$scope.allCheckbox = true;
$scope.toggleCb = function(value) {
console.log('called with value', value);
$scope.allCheckbox = value;
}
});
So this basic example setup has a couple of buttons which when clicked will change the boolean value of the scope variable. That is to illustrate that setting the scope variable is being respected by the input. The input is click-bound as well to the same function and when using 1.0.8 it keeps the checkbox checked.
Has anyone had a need to do this with running the latest version of angular, and if so how have you overcome this issue?
All of the examples I have found show the radio button group being built by some for item in items loop but none of them show a simple accessing of the radio button group array in the angularjs controller. What I need to do is traverse through the button group array to see if any of them are in "selected" state.
var radioSelected = false;
for(var i =0; i < items.length; i++) {
if(items[i].selected) {
radioSelected = true;
}
}
I have tried binding to the ng-model and accessing it .. I have tried using $scope.ButtonGroupName Nothing yeilds an array that I can traverse with a loop. Any suggestions on how to do this once VERY simple activity would be greatly appreciated.
Gotta love being forced to relearn web development because somebody broke out a new shiney hammer.
You would not traverse the DOM elements. You would use the same ng-model for all the radio elements, and that would be updated whenever you change the selected state of the radio button.
<input type="radio" ng-model="assignedValue" name="myRadio" value="one">
<input type="radio" ng-model="assignedValue" name="myRadio" value="two">
<input type="radio" ng-model="assignedValue" name="myRadio" value="three">
You would $watch the $scope.assignedValue for changes instead of traversing the DOM elements.
$scope.$watch('assignedValue', function (newValue, oldValue) {
..do stuff here
});
See here for documentation: https://docs.angularjs.org/api/ng/input/input%5Bradio%5D
The reason you don't traverse the DOM is because it's constantly changing. The whole point of Angular is to work off of data and not the elements themselves.
Update: Based on your comments, it sounds like only want to execute an action if a radio button has been selected.
First, a radio button should always have a selected state. Let's pretend it doesn't though. You can enable / disable / show / hide elements in angular in a couple of ways without writing additional DOM manipulation code.
Taking the example above, this button will only be enabled if the assignedValue is two.
<button ng-disabled="assignedValue != 'two'">My button</button>
You can also conditionally include content using ng-if:
<div ng-if="assignedValue == 'two'>
My conditional content
</div>
This will also work with ng-switch
<div ng-switch on="assignedValue">
<div ng-switch-when="two">My additional content</div>
<div ng-switch-default>Here's switch fallback content</div>
</div>
I'm trying to add some text to the last cursor place after clicking a button.
In the controller:
$scope.addEmoji = function(name){
var element = $("#chat-msg-input-field");
element.focus(); //ie
var selection = element.getSelection();
var textBefore = $scope.chatMsg.substr(0, selection.start);
var textAfter = $scope.chatMsg.substr(selection.end);
$scope.chatMsg = textBefore + name + textAfter;
}
$scope.updateChatMsg = function(chatMsg){
$scope.chatMsg = chatMsg;
}
$scope.sendChatMsg = function(){
var backend = $scope.convs[$scope.active.conv].backend.name;
$scope.view.addChatMsg($scope.active.conv, $scope.active.user, $scope.chatMsg,new Date().getTime() / 1000, backend);
Chat[backend].on.sendChatMsg($scope.active.conv, $scope.chatMsg);
$scope.chatMsg = '';
};
And then some HTML:
<div class="chat-msg-button" >
<button ng-click="view.toggle('emojiContainer')" ><img src="/apps/chat/img/emoji/smile.png"></button>
</div>
<form id="chat-msg-form" ng-submit="sendChatMsg()">
<div class="chat-msg-button" >
<button type="submit"><div class="icon-play"> </div></button>
</div>
<div id="chat-msg-input">
<textarea id="chat-msg-input-field" autocomplete="off" type="text" ng-model="chatMsg" ng-change="updateChatMsg(chatMsg)" placeholder="Chat message"></textarea>
<div>{{ chatMsg }}</div>
</div>
</form>
What I'm trying to achieve: a user types some text in the textarea => $scope.chatMsg gets the value of the textarea. Now the user press one of the button's => the name of the button is added to the latest cursor position. (it's no problem to find the latest cursor position)
The problem
There is a difference between the value of $scope.chatMsg, {{ chatMsg }} inside the div and the text in the textarea.
The contents of the textarea and the div stays always the same. But when pressing the button the name is added to $scope.chatMsg but the contents of the textarea isn't changed...
How can I solve this?
TIA
First of all, you're mixing jQuery with AngularJS, it doesn't look like you need jQuery here that much.
Also, your chat message is updated in 3 different functions, so you need some debugging to see which are fired.
In general:
To solve your issue, try some more debugging, do a
$scope.$watch($scope.chatMsg, function(){
console.log($scope.chatMsg);
});
this will watch all changes to chatMsg. Add console.log() to each of your functions and you can watch which is fired.
Also, rather than using {{ }} inside your div just use ng-bind since that text is the only item in your div, it's cleaner if your app crashes somewhere.
// change from
<div>{{ chatMsg }}</div>
// to
<div ng-bind="chatMsg "></div>
Update: after seeing your plunker, I modified it and came up with this: http://plnkr.co/edit/oNKGxRrcweiJafKCm9A5?p=preview
Your ng-repeat needs to be tracked by $index so that duplicates are displayed rather than crashing when someone creates the same message
I solved all problems. The plunkr form above works. So after investigating all scopes with the Angular chrome extension I saw that chatMsg was defined in another scope. Thus not in the scope I was trying to acces it from.
Via this question angularJS ng-model input type number to rootScope not updating I found a solution.
I added chatMsg to the fields object.