I have 2 radio buttons, then is ng-change event is applied on NO radio button.
I am showing a confirmation box , on ng-change event of NO radio button.
if he click cancel, Then I want to check the Yes Radio button.
But it's not working .
HTML
<body ng-app="myapp" ng-controller="MyCtrl">
<div>
Yes:
<input type="radio" ng-model="ModelVal" value="true" name="ff">
<br>No:
<input type="radio" ng-model="ModelVal" value="false" ng-change="chck('ModelVal')" name="ff">
<br>
<hr>{{ModelVal}}
<div ng-if="ModelVal == 'true'">Helll</div>
</div>
</body>
JS
// Code goes here
var myapp=angular.module('myapp',[]);
myapp.controller('MyCtrl',function($scope){
$scope.ModelVal='true';
$scope.chck=function(chkM){
var getV=confirm('Sure to Cancel ?');
if(getV) {
$scope[chkM]='false';
}else {
$scope[chkM]='true';
}
};
});
as you can see from demo, after clicking on NO radio button, I'm not changing model, unless he click on OK or cancel.
PLUNKER
Using a $timeout() seems to have solved the problem
// Code goes here
var myapp = angular.module('myapp', []);
myapp.controller('MyCtrl', function ($scope, $timeout) {
$scope.ModelVal = 'true';
$scope.chck = function (chkM) {
var getV = confirm('Sure to Cancel ?');
$timeout(function () {
$scope[chkM] = getV ? 'false': 'true';
})
}
});
// Code goes here
var myapp = angular.module('myapp', []);
myapp.controller('MyCtrl', function($scope, $timeout) {
$scope.ModelVal = 'true';
$scope.chck = function(chkM) {
var getV = confirm('Sure to Cancel ?');
$timeout(function() {
$scope[chkM] = getV ? 'false' : 'true';
})
}
});
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js"></script>
<div ng-app="myapp" ng-controller="MyCtrl">
<div>
Yes:
<input type="radio" ng-model="ModelVal" value="true" name="ff">
<br>No:
<input type="radio" ng-model="ModelVal" value="false" ng-change="chck('ModelVal')" name="ff">
<br>
<hr>{{ModelVal}}
<div ng-if="ModelVal == 'true'">Helll</div>
</div>
</div>
Related
<input type="checkbox" name="chk" ng-model="Crate" ng-click="crate('sm',$event)">
on model cancel
$scope.cancelC = function() {
console.log($scope.Crate);
}
//it showing false but not unchecking the checkbox
You have to specify the ng-value. You can use just ng-value="true" or other values, as string value ng-value="'now-this-is-a-string-value'".
angular.module('test', []).controller('TestController', function() {
var vm = this;
this.title = 'Test';
this.value = true;
this.toggle = function() {
vm.value = !vm.value;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test">
<div ng-controller="TestController as test">
{{ test.title }}
<input type="checkbox" name="chk" ng-model="test.value" ng-value="true" />
<button ng-click="test.toggle('sm',$event)">Toggle</button>
</div>
</div>
I want to change the form inputs dynamically , and i have tried doing it using ng-bind-html , but only label is getting displayed , text box doesn't appears on the DOM. Here what has to be written inside ctrl.content depends upon the values from the server.
Note
type value will be coming from server , and it can be dynamic
HTML
<div ng-bind-html="ctrl.content">
Controller
function myCtrl(type) {
var ctrl = this;
switch (type) {
case 1:
ctrl.content = " <div> Input : <input type=\"text\" > </div> ";
break;
case 2:
ctrl.content = " <div> Input : <input type=\"textarea\" > </div> ";
break;
default:
}
Dom Element :
<div class="padding ng-binding ng-scope" ng-bind-html="addMeassurments.content"> <div> Input : </div> </div>
First, your assignment is all wrong
ctrl.content = " <div> Input : <input type=\"text\" > </div> ";
You should be assigning the markup to a $scope property. e.g.
$scope.content = " <div> Input : <input type=\"text\" > </div> ";
Secondly you should use the $sce service to sanitize the html. Here's a plnkr where this code demonstrates the intended behavior
var app = angular.module('plunker', []);
app.controller('Ctrl', function($scope, $sce) {
$scope.name = 'World';
var ctrl = this;
$scope.click = function myCtrl(type) {
switch (type) {
case 1:
$scope.content = $sce.trustAsHtml("<div> Input : <input type=\"text\" > </div> ");
break;
case 2:
$scope.content = $sce.trustAsHtml(" <div> Input : <textarea></textarea> </div> ");
break;
default:
}
}
});
Note also that I changed your markup from input type="textarea" to a textarea element.
You should use $sce service with ngSanitize module:
angular.module('app', ['ngSanitize'])
.controller('MyController', ['$scope', '$sce', function($scope, $sce) {
$scope.html = function(){
return $sce.trustAsHtml(`<div> Input : <input type=\"${$scope.type == 0 ? 'text' : 'textarea'}\" > </div>`);
}
}]);
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script src="//code.angularjs.org/snapshot/angular-sanitize.js"></script>
<body ng-app="app">
<div ng-controller="MyController" ng-init='type="0"'>
text: <input type="radio" ng-model="type" value="0">
textarea: <input type="radio" ng-model="type" value="1">
<div ng-bind-html="html()"></div>
</div>
</body>
A textarea can not render HTML input type like <input type=\"textarea\" >..
and try with $sce.
var app = angular.module('exApp',[]);
app.controller('ctrl', function($scope,$sce){
$scope.text = $sce.trustAsHtml("<div> Input : <input type=\"text\" > </div> ");
$scope.textArea = $sce.trustAsHtml(" <div> Input : <textarea></textarea> </div> ");
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="exApp" ng-controller="ctrl">
<div ng-bind-html="text"></div><br>
<div ng-bind-html="textArea"></div><br>
</body>
Use ng-if instead of ng-bind-html.
Something like this:
<div>
<div ng-if="type===1">Input : <input type="text"></div>
<div ng-if="type===2">Input : <input type="textarea"></div>
</div>
And in your controller, you will only need to dynamically assign type either 1 or 2 as value.
I have several checkboxes dynamicaly generated from array source:
/*js*/
$scope.arrondissements = JSON.parse('
[{"name":"4e","checked":false,"disable":true},
{"name":"5e","checked":false,"disable":false},
{"name":"11e","checked":false,"disable":false},
{"name":"12e","checked":false,"disable":false},
{"name":"13e","checked":false,"disable":false},
{"name":"14e","checked":false,"disable":false},
{"name":"15e","checked":false,"disable":false},
{"name":"16e","checked":false,"disable":false},
{"name":"17e","checked":false,"disable":false},
{"name":"18e","checked":false,"disable":false},
{"name":"19e","checked":false,"disable":false},
{"name":"20e","checked":false,"disable":false}]');
<!-- HTML -->
<div ng-repeat="item in arrondissements" class="checkbox-inline ">
<label>
<input type="checkbox" ng-disabled="{{item.disable == true}}"
value="{{item.checked}}" ng-model="item.checked" >
<span>{{item.name}}</span>
</label>
</div>
Checkboxes are generated correctly but When source gets updated , checkbox doesn't update
/*js*/
$scope.disableCb = function () {
$scope.arrondissements[5].disable = true;
$scope.arrondissements[6].disable = true;
$scope.arrondissements[7].disable = true;
}
<!-- HTML -->
<button ng-click="disableCb()">disable</button>
Could you tell me why and how to fix it?
I made a Plunker : http://plnkr.co/edit/jD1l3NgJuduTOoskpeVM
You should define your $scope.disableCb function inside your controller function.
function controller( $scope) {
var vm = $scope;
$scope.title = 'controller';
$scope.arrondissements = JSON.parse('[{"name":"4e","checked":true,"disable":true},{"name":"5e","checked":false,"disable":false},{"name":"11e","checked":false,"disable":false},{"name":"12e","checked":false,"disable":false},{"name":"13e","checked":false,"disable":false},{"name":"14e","checked":false,"disable":false},{"name":"15e","checked":false,"disable":false},{"name":"16e","checked":false,"disable":false},{"name":"17e","checked":false,"disable":false},{"name":"18e","checked":false,"disable":false},{"name":"19e","checked":false,"disable":false},{"name":"20e","checked":false,"disable":false}]');
$scope.disableCb = function () {
$scope.arrondissements[5].disable = true;
$scope.arrondissements[6].disable = true;
$scope.arrondissements[7].disable = true;
}
}
I've also fixed how you used your directives. I've removed the value attribute on the checkboxes since they're redundant with ng-model.
I've fixed your usage of ng-disabled as well
<div ng-repeat="item in arrondissements" class="checkbox-inline ">
<label>
<input type="checkbox" ng-disabled="item.disable"
ng-model="item.checked" >
<span>{{item.name}}</span>
</label>
</div>
<button ng-click="disableCb()">disable</button>
see my fork on your plunker: http://plnkr.co/edit/v1fwlf7QH0189WAhv6qM?p=preview
Q] I'm basic Developer , How to display text from textarea on submit button using angular-js ?
I have current code with me :-
<html ng-app="myApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
myApp = angular.module('myApp', []);
function Ctrl($scope) {
$scope.list = [];
$scope.pass = $scope.list;
$scope.text = 'Share your knowledge !';
$scope.submit = function() {
if ($scope.text) {
$scope.pass.push($scope.text);
}
};
}
</script>
</head>
<body>
<div ng-app>
<div ng-controller="Ctrl">
<form ng-submit="submit()">
<br>
<textarea style="resize:initial;" type="" ng-model="text" name="text"></textarea>
<br>
<input align="right" style="margin-top:20px;margin-left:120px; align:right;" type="submit" id="submit" value="Submit" />
<pre>{{list}}</pre>
</form>
</div>
</div>
</body>
</html>
The above code just display's messages from textarea in an array format.
But i just want a single text message to be printed/displayed . How can that be achieved ? Thank you .
I guess you only want to display the current message which is in textarea. If so do this:
function Ctrl($scope) {
$scope.pass = [];
$scope.text = 'Share your knowledge !';
$scope.submit = function() {
if ($scope.text) {
$scope.pass.push($scope.text);
$scope.list = $scope.text;
}
};
}
You can user text as value of the textarea.
When from is submitted set the value of textarea.
I guess you want the message in textarea to show in list after form submit.
<html ng-app="myApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
myApp = angular.module('myApp', []);
function Ctrl($scope) {
$scope.list = '';
// ^^^^^^^^^^^^^
$scope.pass = $scope.list;
$scope.text = 'Share your knowledge !';
$scope.submit = function() {
$scope.list = $scope.text;
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
};
}
</script>
</head>
<body>
<div>
<div ng-controller="Ctrl">
<form ng-submit="submit()">
<br>
<textarea style="resize:initial;" type="" ng-model="text" name="text"></textarea>
<br>
<input align="right" style="margin-top:20px;margin-left:120px; align:right;" type="submit" id="submit" value="Submit" />
<pre>{{list}}</pre>
</form>
</div>
</div>
</body>
</html>
Please help, I have the following code
<div>
<input type="checkbox" id="chk1" ng-model="Status" />
<span ng-bind="Title"></span>
</div>
<div id="div1" ng-show="Status">
<span ng-bind="SpanTitle" ></span>
<input type="text" id="txtLastName"
ng-model="LastName"
ng-click="LastNameClick()"
ng-blur="LastNameOut()"
name="txtLastName" />
</div>
and when checkbox is being checked the div1 is shown but the input text cannot be clicked or written.
Any idea please?
Edit: Added controller from user's comment
function DController($scope) {
var defaultInputText = "hello";
$scope.Title = "check";
$scope.SpanTitle = "Span";
$scope.Status = false;
$scope.LastName = defaultInputText;
$scope.LastNameClick = function () {
if ($scope.LastName ==defaultInputText) {
$scope.LastName = "";
}
}
$scope.LastNameOut = function () {
if ($scope.LastName.length == 0) {
$scope.LastName = defaultInputText;
}
}
}
From code, that you have provided, I can suggest, that problem can be in css. May be some elements overlap the input.