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.
Related
Having this js fiddle
var app = angular.module('myApp', []);
app.controller('MyController', ['$scope', MyController]);
function MyController($scope) {
$scope.value1 = $scope.value1;
$scope.value2 = "this is it: " + $scope.value1;
}
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<div ng-controller='MyController'>
<h1>Introduce your value:</h1>
<input type="text" ng-model="value1"></input></br>
<input type="text" ng-model="name" ng-change="value1"></input>
</div>
</html>
I want to introduce a value in the first input and to get it into the next one as "this is it: firstvalue".
You can achieve that easily using ng-change and using ng-model properly
var app = angular.module('myApp', []);
app.controller('MyController', ['$scope', MyController]);
function MyController($scope) {
$scope.value1 = undefined;
$scope.value2 = undefined;
$scope.onValue1Change = function(){
$scope.value2 = "this is it: " + $scope.value1;
};
}
<html ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<div ng-controller='MyController'>
<h1>Introduce your value:</h1>
<input type="text" ng-model="value1" ng-change="onValue1Change()"></input></br>
<input type="text" ng-model="value2"></input>
</div>
</html>
I have an input text field as :
<input type="text" class="form-control" id="inputValue" name="uservalue" ng-model="inputNumber" ng-required="true" autofocus="true" ng-blur="checkIfValid()"/>
My controller has the ng-blur function as follows:
$scope.checkIfValid = function(){
console.log("Value is = " + $scope.inputNumber);
}
I have defined - $scope.inputNumber = '';
My console.log shows an empty value even though I input a value in the text field and hit 'Tab' or move on to the next field to invoke the ng-blur function.
What am I doing wrong here?
`
Check this
var app = angular.module("myapp", []);
app.controller("myCtrl", ['$scope', function($scope) {
$scope.inputNumber="new";
$scope.checkIfValid = function(){
console.log("Value is = " + $scope.inputNumber);
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
<div ng-controller="myCtrl">
<input type="text" class="form-control" id="inputValue" name="uservalue" ng-model="inputNumber" ng-required="true" autofocus="true" ng-blur="checkIfValid()"/>
<h1>{{inputNumber}}</h1>
</div>
</div>
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>
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>
I am trying to create a attribute directive that will insert a label before the input field. Judging by the alert statement, the html looks correct. However I am not compiling or doing the angular element correctly. Any help would would be much appreciated.
The fiddle is http://jsfiddle.net/2suL9/
This is the JS code.
var myApp = angular.module('myApp', []);
myApp.directive('makeLabel', function ($compile) {
return {
restrict: 'A',
replace: false,
link: function (scope, inputFld, attrs) {
var ForInput = attrs['name'];
var LabelSize = attrs['labelSize'];
var LabelText = attrs['makeLabel'];
var htmlStart = '<label for="' + ForInput + '" class="label-control ' + LabelSize + '">';
var htmlStar = '';
if (attrs['required'] ) {
htmlStar = '<span style="color:red">*</span>';
}
var htmlEnd = LabelText + ":</label> ";
var htmlTotal = htmlStart + htmlStar + htmlEnd;
alert(htmlTotal);
// Now add it before the input
var newLabel = angular.element(htmlTotal);
inputFld.prepend(($compile(htmlTotal)));
}
};
});
This is the HTML
<!DOCTYPE html>
<html class="no-js" data-ng-app="myApp">
<head>
<title></title>
</head>
<body>
<div class="container">
<div class="row">
<form name="TestLabelForm" class="form-horizontal">
<div class="form-group">
<input type="text" name="Simple" required="" make-label="Test Label" label-size="col-md-7" />
</div>
</form>
</div>
<br />
Should look like
<br />
<div class="row">
<form name="ExampleForm" class="form-horizontal">
<div class="form-group">
<label for="Simple2" class="col-md-7"><span style="color:red">*</span>Test Label:</label>
<input type="text" name="Simple2" required="" />
</div>
</form>
</div>
</div>
<!-- Get Javascript -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"> </script>
<script src="js/TestLabelAttr.js"> </script>
</body>
</html>
Did you see the DOM Exception, which was thrown? It could not find the elements, which you created. You have to use document.createElement() and introduce the newly created element to the scope via $compile(scope)(newElement). Here is a working fiddle of this: http://jsfiddle.net/2suL9/26/ Please note that I didn't implement the if condition of your example, you have to add it!
The javascript part looks like this:
var myApp = angular.module('myApp', []);
myApp.directive('makeLabel', function ($compile) {
return function (scope, inputFld, attrs) {
var el = inputFld[0];
var newEl = document.createElement("label");
newEl.setAttribute("for", attrs['name']);
newEl.setAttribute("class", "label-control");
var subEl = document.createElement("span");
subEl.setAttribute("style", "color:red");
subEl.innerHTML = "*";
var endText = document.createTextNode("Test Label:");
$compile(scope)(newEl);
$compile(scope)(subEl);
$compile(scope)(endText);
newEl.appendChild(subEl);
newEl.appendChild(endText);
inputFld.parent().prepend(newEl);
}
});
Note: Changing the dom elements outside of the directive is not a good practice. Rather use another directive for the label, which should be shown in front of the input. You can centralise the logic in your controller and use broadcast to inform the directives, when they should change.