this is my html:
<div ng-if="!item.edit>
<div class='door-description' ng-bind-html="item.Description"></div>
<div class='door-softvalues' ng-bind-html="item.SoftValues" ng-if="item.IsConfiguration"></div>
</div>
<div ng-if="item.edit">
<textarea elastic class='door-description' ng-bind-html="item.Description" ng-model="item.Description"></textarea>
<textarea elastic class='door-softvalues' ng-bind-html="item.SoftValues" ng-if="item.IsConfiguration" ng-model="item.SoftValues"></textarea>
</div>
So the linebreak looks good when im in edit mode and do the edit to the textarea but when i save the text and retrieve it again it looses the linebreaks.
Here is what it looks like when editing:
And here is what it looks like when not editing:
I can still toggle between edit and not editing and i will get the same result.
What do i have to do to make the linebreaks appear when not editing?
Can you try using pre tag:
<pre class='door-description' ng-bind-html="item.Description"></pre>
Just apply this style to your element:
white-space: pre;
Can you please use like this ,
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<textarea elastic class='door-description' ng-bind-html="myText " ng-model="myText "></textarea>
</div>
<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
$scope.myText = "My name is: <div><h1>John Doe</h1></div>";
});
</script>
may be this will work .
It will give object like ,
My name is: <div><h1>John Doe</h1></div>
Related
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body>
<p>Change the value of the input field:</p>
<div ng-app="" ng-init="myCol=''">
<input style="background-color:{{myCol}}" ng-model="myCol">
</div>
<div id="secondApp" ng-init="myCo=''">
<input style="background-color:{{myCo}}" ng-model="myCo">
</div>
<p>AngularJS resolves the expression and returns the result.</p>
<p>The background color of the input box will be whatever you write in the input field.</p>
<script type="text/javascript">
var secondDiv = document.getElementById('secondApp');
angular.element(document).ready(function() {
angular.bootstrap(secondDiv, [ 'secondApp' ]);
});
</script>
</body>
</html>
Here is my code. The first input field works perfectly but the second input field is not working even I use bootstrap. Please anyone show me the right way to do it.
Thanks
Ajinkya pointed you in the right direction... going on from there:
var firstApp = angular.module("firstApp", []);
var secondApp = angular.module("secondApp", []);
firstApp.controller("faController", function($scope) {});
secondApp.controller("saController", function($scope) {});
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById("firstApp"), ['firstApp']);
angular.bootstrap(document.getElementById("secondApp"), ['secondApp']);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<p>Change the value of the input field:</p>
<div id="firstApp" ng-controller="faController" ng-init="myCol='lightblue'">
<input style="background-color:{{myCol}}" ng-model="myCol">
</div>
<div id="secondApp" ng-controller="saController" ng-init="myColor2='lightpink'">
<input style="background-color:{{myColor2}}" ng-model="myColor2">
</div>
<p>AngularJS resolves the expression and returns the result.</p>
<p>The background color of the input box will be whatever you write in the input field.</p>
This question already had an answer:
bootstrap to use multiple ng-app
Please refer and make changes to your code accordingly.
I am trying to change the color of a textarea in an Angular app using jQuery but it does not work.
What should I do? It says $ is not defined.
HTML:
<body>
<div ng-app="myApp" ng-controller="testController">
<textarea id="abc">abc
</textarea>
</div>
</body>
</html>
Angular js:
var app = angular.module('myApp', []);
app.controller('testController', function($scope, $http) {
var tdVal =$("#abc");
var x = tdVal.innerHTML;
tdVal.html ("<span style='color: rgba(220, 0, 0, 1)'>" + x"</span>");
});
You are not just changing color, but the control itself. If changing color is the intent:
var elem = angular.element('#abc');
elem.css('color', 'rgba(220, 0, 0, 1)');
for value update, angular provides you bind directive.
$scope.value = 'some value'
and in view
<textarea id="#abc" ng-bind="value"></textarea>
Try this, it does work if there are not some other dependincies:
$('#abc').css('color', 'rgba(220, 0, 0, 1)');
it looks like you want to render HTML within textarea tag, which is not allowed by browsers, but what you can do is to use editable div element:
<div id="abc" contenteditable="true"></div>
check out Rendering HTML inside textarea
angular.element by default uses jQueryLight which is limited version og jQuery. You should use ng-style angular directive:
<div id="abc" contenteditable="true">
<span ng-style="{color: 'rgba(220, 0, 0, 1)'}">abc</span>
</div>
or you can assign to ng-style your custom function which will return CSS object, according to your logic.
I have a small piece of code, which I would like to extend with in line editting possibilities:
HTML:
<h1>Schedule <label ng-click="modifyText(index)">{{th.schedules[index].label}} </label>
</h1>
JS:
$scope.modifyText = function(index) {
this.th.schedules[index].label = 'modifiedtext';
};
Hence I would like to be able to click {{th.schedules[index].label}}, modify it inline to the string: "modifiedtext", and save it.
How can I do that?
Thank you.
In order to edit a label inline, you would probably have to use the contentEditable attribute since it isn't directly an editable element. If you give it an ng-model changing that data could be easier but you will still have to make a UI for actually editing it.
Instead I made an example using a text input and some simple styling to make it seem as though it isn't a text input when it isn't focused
http://jsfiddle.net/yrakrj48/
//-- HTML
<body ng-app="TestApp">
<div ng-controller="TestController">
<input ng-class="editing ? 'hasBorder' : 'noBorder'" type="text" ng-model="myLabel" ng-focus="editing = true" />
<button ng-if="editing" ng-click="saveEdit()">done</button>
</div>
</body>
//-- JS
var app = angular.module('TestApp',[]);
app.controller('TestController', function($scope) {
$scope.myLabel = 'this is a label';
$scope.saveEdit = function() {
$scope.editing = false;
};
});
//-- CSS
.hasBorder {
border:1px solid #666;
}
.noBorder {
border:none;
}
You should look into directives because creating one would be easy and I am sure one already exists somewhere out on github
I think you use. contenteditable=true
<div contenteditable=true>
I am Editable
</div>
I have a question would like to ask, why could not I get value from bootstrap text editor ?
Here is html
<div class="form-group">
<div class="col-xs-12">
<textarea name="textarea" class="jqte-test text-desc"></textarea>
</div>
</div
Here is my jquery code :
<script>
var text_desc = $(".text-desc").val();
$("#btn-for-text").on("click",function(){
alert(text_desc);
})
</script>
Note : I am using te jQuery Text Editor : jqueryte.com
If you don't get the textarea value inside the click event function, never can get the currect value of textarea
<script>
$("#btn-for-text").on("click",function(){
alert($(".text-desc").val());
})
</script>
I am new to Angularjs. I've tried a example in here.
file index.html:
<div ng-repeat="data in ctl.dataList">
<div class="col-md-6">
<textarea type="text" ng-mouseover="ctl.mouseOverFunc()" ng-mouseleave="ctl.mouseLeaveFunc()">{{data.value}}</textarea>
<button ng-show="ctl.showCloseBtn">X</button>
</div>
</div>
file app.js:
app.controller('FocusController', function() {
this.showCloseBtn = false;
this.dataList = [{
value: "one"
}, {
value: "two"
}];
this.mouseOverFunc = function() {
this.showCloseBtn = true;
};
this.mouseLeaveFunc = function() {
this.showCloseBtn = false;
};
});
I want to show close button when mouse overed every textarea like facebook chat in this picture. But my issues is when mouse over one of textarea then all X button was showed.
How do i assign dynamic controller to every textarea or how to do like facebook chat ?
Thanks for your help
You can do with CSS as well as AngularJS. I suggest you to do with CSS which is Simple. And Do your ng-click on the button.
This Plunker Demo is using with CSS and added ng-click there. Please check the styles and classes added.
Styles
<style>
.field:hover .btn-close {
display:block;
}
.btn-close {
display:none;
}
</style>
HTML
<div ng-repeat="data in ctl.dataList">
<div class="col-md-7 field">
<textarea></textarea>
<button ng-click="doSomething()" class="btn-close">X</button>
</div>
</div>
This Plunker Demo is with AngilarJS as explained in the other answer by New Dev.
<div ng-repeat="data in ctl.dataList">
<div ng-mouseover="data.showX = true"
ng-mouseleave="data.showX = false">
<textarea></textarea>
<button ng-click="doSomething()" ng-show="data.showX">X</button>
</div>
Typically, it would be best to create a directive for this functionality and encapsulate all the logic of clicking the "x" button, but for simplicity you could also leverage the child scope created by ng-repeat, and do the following:
<div ng-repeat="data in ctl.dataList">
<div ng-mouseover="data.showX = true"
ng-mouseleave="data.showX = false">
<textarea type="text"></textarea>
<button ng-show="data.showX" ng-click="ctl.close(data)">X</button>
</div>
</div>
ng-repeat="item in items" creates a child scope for each item, so you can set values on the child scope.
Here's your modified plunker
EDIT:
As suggested in the comments, if you have nothing more complex than showing or hiding the button, definitely CSS approach is the simplest way to go. Use the above example then as an illustration for how scopes work.