I have a problem when I want to append a textarea linked to tinyMCE wysiwyg.
tinyMCE don't have time to initialize so maybe the solution is to wait the end of the ng-repeat. But I don't now how and tinyMCE is not using angular so..
Need your help.
Have a good time.
Take a Look at this
Working Demo
html
<div ng-app="myApp" ng-controller="PostController">
<br/>
<textarea ng-model="mypost" ui-tinymce="tinymceOptions"></textarea>
<br/>
<input type="button" value="Submit" ng-click="submit()"/>
<br/>
<ul>
<li ng-repeat="post in posts | orderBy:orderProp:true">
<input type="button" value="Edit" ng-click="edit=!edit;newpost=post.content"/>
<input ng-hide="edit" type="button" value="Delete" ng-click="deletepost(post)"/>
<br />
<div ng-hide="edit" style="white-space: pre-wrap"><ANY ng-bind-html-unsafe="post.content"></ANY></div>
<div ng-show="edit">
<textarea ng-model="newpost" ui-tinymce="tinymceOptions"></textarea>
<input type="button" value="Submit" ng-click="editpost(post, newpost);edit=!edit" />
</div>
<br /><br /><br/>
</li>
</ul>
</div>
script
var myApp = angular.module('myApp', ['ui.tinymce']);
function PostController($scope) {
$scope.posts = [];
$scope.time = 1;
$scope.orderProp = 'pseudo_time';
$scope.tinymceOptions = { menubar: false };
$scope.submit = function() {
newpost = {"content": $scope.mypost, "pseudo_time": $scope.time++};
$scope.posts.push(newpost);
};
$scope.editpost = function(post, newpost) {
var index = jQuery.inArray(post, $scope.posts);
$scope.posts[index].content = newpost;
};
$scope.deletepost = function(post) {
if (confirm("Delete Answer?") == true) {
var index = jQuery.inArray(post, $scope.posts);
$scope.posts.splice(index, 1);
}
};
}
Related
I want to clone the template and show it to the <div id= "wrapper"> with different ID every time I make a clone. When I press the add-new-project button a new template is shown with different "ID" every time.
Javascript code:
$("document").ready(function () {
var cloneCntr = 1;
var i = 0;
$("#projectData").on('click', function () {
$('template').children().each(function () {
this.id = this.id+ this.i;
});
var temp = document.getElementsByTagName("template")[0];
var clon = temp.content.cloneNode(true);
i++;
$('#wrapper').append(clon);
});
});
Html code:
<form id="projectForm">
<div class="container">
////// ---------------------code-------//// <br>
<br>
<h4>Project Experience</h4>
<hr>
<template id="template">
<br>
<br>
<div class="form-row">
---------Template Code-------
</div>
</div>
<hr>
</template>
</div>
<div id="wrapper" class="container">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<div class="container">
<button type="button" id="projectData" class="btn btn-primary">Add New Project</button>
</div>
</body>
</html>
I want to replace every tag "id" in the template, every time when I make a clone of this.
Here's an example of how this could work for you.
See a demo here: https://jsfiddle.net/o76pqxyw/
Here's a screenshare, showing how the IDs change: https://www.loom.com/share/4a1556c4bb5c4422ad1d4b20a12a638a
HTML
<div id="template-form">
<p><label>First Name</label> <input type="text" id="first-name" /></p>
<p><label>Last Name</label> <input type="text" id="last-name" /></p>
</div>
<button id="btn">Add New User</button>
<div id="container"></div>
Javascript
const button = $('#btn');
const target = $('#container');
let counter = 0;
$(button).on('click', () => {
const template = $('#template-form');
const copy = $(template).clone();
counter++;
const elements = $(copy).find('input');
$(elements).each(function(index) {
const currentId = $(this).attr('id');
const newId = currentId + '-' + counter;
$(this).attr('id', newId);
});
$(target).append(copy);
})
I have this in my angular code:
$scope.Disable = false;
$scope.SetDisable = function (Number) {
if (Number.length < 4) {
return false;
}
else {
return true;
}
};
$scope.$watch("Admin.UserName", function () {
$scope.Disable = $scope.SetDisable($scope.Admin.UserName.length);
});
And this code in my view:
<input id="Submit" name="Submit" class="btn btn-success" type="submit" value="Login" ng-disabled="Disable" />
Notice that ever i change the default value of $scipe.Disable to true and turn the other lines of code in my Angular script to comment, the button is still enabled.
If i change the code in my View to:
<input id="Submit" name="Submit" class="btn btn-success" type="submit" value="Login" ng-disabled="true" />
(ng-disabled="true")
The button is disabled.
What am i doing wrong?
use ng-change instead of $watch e.g.
$scope.myChange = function (nu) {
if (nu.length < 4) {
$scope.Disable = false;
}
else {
$scope.Disable = true;
}
};
see this link:
https://plnkr.co/edit/m5TUzC35gg8EuApVHcO0?p=preview
This may caused by Angular scope inheritance feature, you could overcome this issue by two approaches:
use controller as syntax:
angular.controller('formController', function(){
this.Disabled = false;
})
<div ng-controller="formController as ctrl">
<input ng-disabled="ctrl.Disabled">
</div>
use a reference variable instead of a primitive variable
$scope.Disabled = { value: false }
<input ng-disabled="Disabled.value">
The problem is that within the $watch() function you pass the length of the string instead of the string when call the function SetDisable() and in this function you use the length again in the if condition.
HTML:
<html ng-app="app">
<head>
</head>
<body ng-controller="mainController">
<div>
<label>UserName:</label>
<input type="text" ng-model="UserName" placeholder="Enter a name here">
<hr>
<input id="Submit" name="Submit" class="btn btn-success" type="submit" value="Login" ng-disabled="Disable" />
</div>
</body>
</html>
JS:
angular
.module('app', [])
.controller('mainController', mainController);
mainController.$inject = ['$scope'];
function mainController($scope) {
$scope.Disable = false;
var SetDisable = function (name) {
if (name.length < 4) {
return false;
} else {
return true;
}
}
$scope.$watch('UserName', function() {
$scope.Disable = SetDisable($scope.UserName);
})
}
I made a working example:
http://codepen.io/anon/pen/GomYGq?editors=101
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>
How do you make a parent div click propagate to its child checkbox in AngularJS? The Checkbox will have the hidden attribute, so we need to allow the parent div be the clickable entity.
HTML:
<body ng-app="checkboxApp">
<div ng-controller="MainController">
<h1>Hello Plunker!</h1>
<form name="myForm">
Value1:<input type="checkbox" ng-model="value1" /><br />
Value2:<input type="checkbox" value="value-2" ng-model="value2" ng-true-value="YES" ng-false-value="NO" /><br />
<tt>value1 = {{value1}}</tt><br />
<tt>value2 = {{value2}}</tt><br />
<hr />
<div class="btn btn-primary">
Value1 (hidden):<input type="checkbox" ng-model="value1" hidden/><br />
</div>
<div class="btn btn-primary" >
Value2:<input type="checkbox" ng-model="value2" ng-true-value="YES" ng-false-value="NO" /><br />
</div>
</form>
</div>
</body>
JS:
angular.module('checkboxApp', []);
angular.module('checkboxApp')
.controller('MainController', [ '$scope', function MainController($scope){
$scope.value1 = true;
$scope.value2 = 'YES'
}]);
Plnkr: here
I have tried a click function() as well on the ng-change, but I still can't get it working.
All you need to do is add an ng-click onto the parent div like this. This example would work if you did not use ng-true-value and ng-false-value.
<div class="btn btn-primary" ng-click="value1 = !value1>
Value1 (hidden):<input type="checkbox" ng-model="value1" hidden/><br />
</div>
<div class="btn btn-primary" ng-click="value2 = !value2>
Value2:<input type="checkbox" ng-model="value2"/><br />
</div>
Otherwise just use a function: ng-click="toggle(value2)"
$scope.toggle = function(val) {
if (val === "YES") {
val = "NO";
} else {
val = "YES";
}
}
Here is a Plunker
Should be simple but I can't work it out.
I've got a page with a table, within that table is an autocomplete and a button, I want to locate the autocomplete when I click the button and make it disabled or enabled. The disable/enabled part isn't the problem, I can't get it to traverse the heirarchy to find the autocomplete in the first place. Here's the chunk of html I've got: -
<td colspan="3">
<fieldset class="buttons">
<div>
<input class='required' style='width:400px' type='text' id='autoLook[0]' name='autoLook[0].id' value='' title='' />
<div class='searchcontainer yui-skin-sam' id='abb890644f19d382ef69951344848d878'></div>
<script type='text/javascript'> var autoCompleteDataSource = new YAHOO.util.XHRDataSource("/FARTFramework/form/searchAJAX");
autoCompleteDataSource.responseType = YAHOO.util.XHRDataSource.TYPE_XML;
autoCompleteDataSource.responseSchema = {
resultNode : "result",
fields : [
{ key: "name" },
{ key: "id" }
]
};
;
autoComplete = new YAHOO.widget.AutoComplete('autoLook[0]','abb890644f19d382ef69951344848d878', autoCompleteDataSource);
autoComplete.queryDelay = 0;
autoComplete.prehighlightClassName = 'yui-ac-prehighlight';
autoComplete.useShadow = false;
autoComplete.minQueryLength = 3;
autoComplete.typeAhead = false;
autoComplete.forceSelection = true;
autoComplete.maxResultsDisplayed = 20;
autoComplete.shadow = false;
var itemSelectHandler = function(sType, args) {
var autoCompleteInstance = args[0];
var selectedItem = args[1];
var data = args[2];
var id = data[1];
updateHiddenInput(id, 0, 'forms') };
autoComplete.itemSelectEvent.subscribe(itemSelectHandler);
</script>
</div>
<input type="button" id="EnableDisable" value="Edit" onclick="enabledisable($(this))" />
<input type="hidden" class="required" id="forms[0]" name="forms[0].id" value="" />
<input type="hidden" class="required" id="oldvalue[0]" name="oldvalue[0].id" value="" />
<input type="button" value="Remove Form" onclick="globalRemoveRow($(this),'forms')" />
<input type="button" value="Insert New Form Above" onclick="addRowWithin('/FARTFramework/testScenario/ajaxNewFormFragment',$(this))" />
<input type="button" value="Go to Form Definition" onclick="gotoNew('/FARTFramework/form/edit/',$(this))" />
</fieldset>
<div id="hideDIV">
<table name="formSubTable[0]" id="formSubTable[0]">
</table>
</div>
</td>
The button I'm clicking is called "EnableDisable" and in the javascript I can do this: -
function enabledisable(theButton){
$thebutton = $(theButton)
$theInput = $thebutton.closest('td')
var myValue = $theInput.html();
alert(myValue)
}
Which returns this: -
<fieldset class="buttons">
<div class="yui-ac">
<input required="required" autocomplete="off" class="required yui-ac-input" style="width:400px" id="autoLook[0]" name="autoLook[0].id" value="" title="" type="text">
<div class="searchcontainer yui-skin-sam yui-ac-container" id="af745a9597adf2dd98aeab126bc31bcb9"><div style="display: none;" class="yui-ac-content"><div style="display: none;" class="yui-ac-hd"></div><div class="yui-ac-bd"><ul><li style="display: none;"></li><li style="display: none;"></li><li style="display: none;"></li><li style="display: none;"></li><li style="display: none;"></li><li style="display: none;"></li><li style="display: none;"></li><li style="display: none;"></li><li style="display: none;"></li><li style="display: none;"></li></ul></div><div style="display: none;" class="yui-ac-ft"></div></div></div>
<script type="text/javascript"> var autoCompleteDataSource = new YAHOO.util.XHRDataSource("/FARTFramework/form/searchAJAX");
autoCompleteDataSource.responseType = YAHOO.util.XHRDataSource.TYPE_XML;
autoCompleteDataSource.responseSchema = {
resultNode : "result",
fields : [
{ key: "name" },
{ key: "id" }
]
};
I can see the input I want is the third line down, the first input there is in that html. But when I try to expand the jquery to $thebutton.closest('td').children('input').eq(0) I get undefined returned.
I've tried all manner of first, next etc but no luck. I know that the input will have the text autolook[xx] in it but there will be loads with that id and I can't tell what the number will be to just look for a specific id or name so need to traverse the html to find it...
Try using .find()
$thebutton.closest('td').find('input[type='text'])
Or
$thebutton.closest('td').find('input')
Or
$thebutton.closest('td').find('input:first')
try tho change this:
function enabledisable(theButton){
$thebutton = $(theButton)
$theInput = $thebutton.closest('td')
var myValue = $theInput.html();
alert(myValue)
}
to this:
$('#EnableDisable').click(function(){
var myValue = $(this).closest('td').find('input').val();
alert(myValue)
});
and your html changed:
<input type="button" id="EnableDisable" value="Edit" />