I have the jquery dialog with input ng-model
<input type="text" ng-model="testing">
{{testing}} // This works
But if I declare {{testing}} outside of jquery dialog angular is not binding the data. Why this is happening. How to fix this.
Here is the fiddle currently working
Try to put all of your elements inside a controller.
<div ng-app>
<div ng-controller="Ctrl">
see
example
Related
In my controller I have input box and a div with text.
By default div is set to display:none
I want to make div visible by focusing on input box.
Is it possible to do with angular.js
Try this (No need to set you div display:none, initally showDiv is false and your div will be hidden):
<body ng-controller="myController" ng-init="showDiv=false">
<input type="text" ng-focus="showDiv=true">
<div ng-show="showDiv"></div>
</div>
Yea Angular makes it super easy without even having to write anything in controller, here's an example:
https://plnkr.co/edit/OqLpGxWwfPaBTVdTBYDy?p=preview
<body ng-controller="MainCtrl">
<input type="text" ng-hide="show" />
<button ng-click="show = !show">Show / Hide</button>
</body>
Obviously you could make yours on a hover instead of a click but you get the idea.
I try to created dropdown with checkbox using angular demo, but its not closing if we click outside of select.
can anybody help?
Please find my fiddle:
http://jsfiddle.net/jab4raoq/120/
HTML:
Below is my html code, please note above fiddle to see the full angular code
<div ng-app="myApp" ng-controller="AppCtrl">
<dropdown-multiselect dropdown-title="Select Filter" pre-selected="member.states" model="selected_items" options="states" tabindex="2"></dropdown-multiselect>
<div>
focused: {{focused}}
</div>
</div>
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 have observed a very peculiar behavior of <s:checkbox> rendering along with Bootstrap 3 and AngularJS.
I have these two <s:checkbox> in my page, wrapped by some elements of Bootstrap 3 styles:
<div class="col-md-1">
<div class="form-group">
<div class="form-other">
<label for="activaCheck"><s:text name="actividad.busqueda.activa"/></label>
<s:checkbox class="form-control" id="activaCheck" name="activaCheck" ng-model="formData.activaCheck" value="true"></s:checkbox>
<s:checkbox class="form-control" id="activaCheck2" name="activaCheck2" value="true"></s:checkbox>
</div>
</div>
</div>
As you can see, the only difference between them, is that the first has attribute ng-model = "xxx", while the second doesn't.
And, in my page, they are rendered differently, although they both are supposed to be pre-selected, because I set value="true". And when we inspect in FF, we can see the first <s:checkbox> has checked="checked", but is not rendered. I have tested in Chrome and FF, same.
I have also tested with <input type="checkbox" /> with ng-model set and checked="checked", the same: not checked when rendered in page.
So I am thinking about AngularJS is taking over part of rendering job which Struts 2 is responsible of, at least in this case. I want some explanation from developers of AngularJS, or this is the expected result?
I got the problem with unchecked checkbox. Because it has ng-model attribute the input control is bound to Angular's $scope. And if the scope doesn't define the property value for the above named checkbox it's not checked. Assumed that AngularJS modifies DOM as soon as it initializes.
I have created plnkr to demonstrate it.
You are right AngularJS starts working after document is loaded. At this time Struts has already done its work and returned html document to the browser. Now Angular continues to prepare the page to work only on one page. Both complement each other, but if Struts use to render
<input type="checkbox" ng-model="checkboxModel.value1" checked="checked">
Angular removes the checked state, because the value is commented
angular.module('checkboxExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.checkboxModel = {
//value1 : true,
value2 : 'YES'
};
}]);
I'm using the kendo-angular tooltip directive with ng-repeat like so:
<div ng-repeat="thing in things"
kendo-tooltip="tooltip"
k-options="thingTooltipModel"
data-thingname="{{thing.name}}>
</div>
<script type="text/x-kendo-template" id="thingTooltipTemplate">
<span>Thing Name: #= target.data('thingname') #</span>
</script>
As stated in the kendo-angular documentation, the kendo widget isn't notified when I update things, so the tooltip continues to display the initial data. Is there a way to manually tell kendo to re-read the data?
In the controller's method Maybe you should put $scope.$apply(function(){//Your CODE for the Update})
You can use k-rebind:
<div ng-repeat="thing in things"
kendo-tooltip="tooltip"
k-options="thingTooltipModel"
k-rebind="thing"
data-thingname="{{thing.name}}>
</div>
That will destroy the old widget and create a new one.