I have written a code for adding messages to the page below the textbox. The text box has an add button . As soon i write a message in the textbx and click on add, the message should appear on the next line. I have used ng-repeat to repeat the process of adding messages whenever the add button is clicked. However i am getting error messages -
Expression 'addMessage()' is non-assignable.
And Error -
angular.js:13283 ReferenceError: message is not defined.
Please help me with the code.
<html ng-app="Swabhav.Message">
<head>
<title>message-app</title>
<script src="angular.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div ng-controller="MessageAdd">
<h3>To Add Message:</h3>
<input text="text" ng-model="addMessage()">
<li ng-repeat="mess in message">
<button type="button" ng-click="addMessage()">Add</button>
</li>
<br>
<li><p> {{mess}}</li>
</p><br>
</div>
<script>
angular.module("Swabhav.Message", [])
.controller("MessageAdd", ["$scope", function($scope) {
$scope.message = [];
$scope.addMessage = function() {
$scope.message.push(message);
};
}]);
</script>
</body>
</html>
Try it:
HTML
<body>
<div ng-controller="MessageAdd">
<h3>To Add Message:</h3>
<input text="text" ng-model="messagetext">
<button type="button" ng-click="addMessage()">Add</button>
<li ng-repeat="mess in message">{{mess}}</li>
</div>
</body>
CONTROLLER:
angular.module("Swabhav.Message",[])
.controller("MessageAdd",["$scope",function($scope){
$scope.messagetext = "";
$scope.message=[];
$scope.addMessage =function(){
$scope.message.push($scope.messagetext);
$scope.messagetext = "";
}
}]);
You have some errors.
First, you can't assign a function to a model. You have to add te value on your model to the array of messages. Then your button has to be before the ng-repeat or you will have one botton for each element on the list and {{mess}} inside the ng-repeat.
<input text="text" ng-model="message">
<button type="button" ng-click="addMessage()">Add</button>
<ul>
<li ng-repeat="mess in messages">
{{mess}}
</li>
</ul>
In your controller I would rename the array to messages and assign a empty array to your model.
$scope.messages=[];
$scope.message = "";
$scope.addMessage =function(){
$scope.messages.push($scope.message);
$scope.message = "";
}
Try this code and tell me if it is what you are trying to do and if you understand the code
Jsfddle
Related
var popover = '<u>Hi</u>: Some message.<br><br>' +
'<u>New</u>: New msg.<br><br>' +
'<u>Next</u>: Next Data.<br><br>' +
'<u>Cancelled</u>: Remove service.<br><br>';
$scope.data = $sce.trustAsHtml(popover);
<th class="col-info hidden-xs text-left">Status
<span popover-placement="bottom" popover="{{ data }}"
popover-trigger="click"
class="pull-right"> <i class="fa fa-info-circle"></i></span>
</th>
//Does not read the html value even use $sce. Is there any conflication going on or anyother thing please assist thank a ton in advance.
You can try using ui.bootstrap, which allows you to have templates within your popovers, so you don't need to compile it with $sce. Here is a demo:
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('myCtrl', function($scope) {
$scope.dynamicPopover = {
"templateUrl": "popover.html"
};
/* // you can have your data stored here
$scope.dynamicPopover.msg = "Some message.";
$scope.dynamicPopover.new = "New msg.";
$scope.dynamicPopover.next = "Next Data.";
$scope.dynamicPopover.cancelled = "Remove service.";
*/
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div ng-app="myApp" ng-controller="myCtrl">
<button uib-popover-template="dynamicPopover.templateUrl" type="button" popover-placement="bottom-left" popover-trigger="click" class="btn btn-default">Status</button>
<!-- Can be a separate file -->
<script type="text/ng-template" id="popover.html">
<u>Hi</u>: Some message.<br><br>
<u>New</u>: New msg.<br><br>
<u>Next</u>: Next Data.<br><br>
<u>Cancelled</u>: Remove service.<br><br>
</script>
</div>
Here, I have created a sample jsfiddle. Please check it
demo
you should use ng-bind-html attribute in your span tag
<span ng-bind-html="data"></span>
I think it will help you
I am making a game that has 50 buttons and everybutton has an identity as a color and an id. On clicking every button there color changes to what it has been defined. If the user clicks on the 25th button , he wins. Only three tries for clicking. I am however unable to do the first step of creating buttons. Please help. I use angularjs1.
<html ng-app="Bluebox">
<head>
<title>BlueBox</title>
<script src="angular.js"></script>
</head>
<body>
<div ng-controller="BoxController">
<button type="button" value = "bluebox" >
<li ng-repeat="x in boxlength">
{{index+1}}
</li>
</button>
</div>
<script>
angular.module("Bluebox",[])
.controller("BoxController",["$scope",function($scope){
$scope.boxlength=50;
$scope.index=0;
}])
</script>
</body>
</html>
Your ng-repeat is not at the right place. You want to repeat buttons.
<button ng-repeat="..." type="button" value="bluebox"></button>
Then the format of ng-repeat is not correct. This directive doesn't repeat a number of times, it repeats in an array.
What we usually do is create a method that create an array based on a number:
<button ng-repeat="i in times(number)" type="button" value="bluebox"></button>
Get number could look like:
$scope.number = 5;
$scope.times= function(x) {
return new Array(num);
}
Since the array created has indentical "values" you need to track by $index
function Main($scope) {
$scope.number = 50;
$scope.times= function(x) {
return new Array(x);
}
}
angular.module('test', []);
angular.module('test')
.controller('Main', Main);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<div ng-app="test">
<div ng-controller="Main">
<button ng-repeat="i in times(number) track by $index" type="button">{{$index}}</button>
</div>
</div>
Html5 dialogs are simple. Shoulda been there 15 years ago!
How to get ng-show working (it doesn't) with dialogs?
<!DOCTYPE html>
<html ng-app="project">
<head>
<meta charset='UTF-8'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script>
angular.module('project', [])
.controller('TheController', function ($scope) {
$scope.dialogShowing = false;
$scope.showDialog = function () {
dialogShowing = true;
document.getElementById('theDialog').show();
};
$scope.hideDialog = function () {
dialogShowing = false;
document.getElementById('theDialog').close();
};
});
</script>
</head>
<body ng-controller="TheController">
<div> Hello
<!-- dialog, where it is placed in the source, doesn't take up space -->
<dialog id="theDialog">
<div>
<h3>Simple Angular Html5Dialog</h3>
<hr/>
<p>I am very well, thank you</p>
<button ng-click="hideDialog()">No, thank you</button>
</div>
</dialog>
how are you?
</div>
<button ng-click="showDialog()">^ Click for the answer</button>
</body>
</html>
The only thing I have been able to get working is .open() and .close() on the dialog widget itself, and have to simulate ng-show/hide, above.
Advice?
I'm not sure what browser you are using, but dialog is very much unsupported by most browsers (http://caniuse.com/#search=dialog). If it's a simple modal you're looking to create why not use a div and style it accordingly?
It's perfectly possible. Here's a demo from my blog:
<div style="width: 600px;" id="example">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript">
var App = angular.module("MyApp", []);
// Make ng-show/hide doesn't work with <dialog>
App.controller('DialogDemo', ['$scope', function ($scope) {
$scope.dialogShowing = false;
$scope.showDialog = function () {
$scope.dialogShowing = true;
$scope.whatHappened = "something happened that needs a dialog";
document.getElementById('theDialog').showModal();
};
$scope.hideDialog = function () {
$scope.dialogShowing = false;
document.getElementById('theDialog').close();
$scope.whatHappened = undefined;
};
}]);
</script>
<div style="align-content: center" ng-app="MyApp" ng-controller="DialogDemo">
(text above button)<br/>
<button ng-click="showDialog()">Click me</button><br/>
(text below button, and above dialog in source)<br/>
<dialog id="theDialog">
<div>
<h3>Ooops</h3>
<hr/>
<div>
<!-- see note above about double-curly-brace -->
{{whatHappened}}
</div>
<hr/>
<button ng-click="hideDialog()">OK</button>
</div>
</dialog>
(text below dialog in source)<br/>
<span style="font-weight: bold" ng-show="dialogShowing">Dialog should now be show (modal style) in the center of the page.</span>
</div>
</div>
Suppose i have 5 textboxes in a list.I enter text input in the first text box and click send. Now i want the input value entered to be showed in all the other textboxes in the list.
Following is my html code:-
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Plunker</title>
<script src="./scripts/angular.min.js"></script>
<script src="./scripts/app.js"></script>
</head>
<body ng-app="chatApp">
<div ng-controller="chatController">
<ul>
<li ng-repeat="chat in chats">
<input type="text"/>
<button ng-click="sendChat()">Send</button>
<button ng-click="deleteChat($index)">Delete</button>
</li>
</ul>
<button ng-click="addChat()">Click me to add</button>
</div>
</body>
</html>
Following is my angular code:-
var app=angular.module('chatApp',[]);
app.controller('chatController',['$scope',function($scope){
$scope.chats=[];
$scope.addChat = function() {
if($scope.chats.length<10)
{
$scope.chats.push({name:''});
}
}
$scope.deleteChat=function(index){
$scope.chats.splice(index,1);
}
$scope.sendChat=function(data){
}
}]);
I have a sendChat function where i was thinking to put the code.
Add model in your input field
<input type="text" ng-model="chat.msg"/>
Then pass the selected msg
<button ng-click="sendChat(chat)">Send</button>
Then assign msg in other textboxes
$scope.sendChat = function(data) {
$scope.chats.map(function(x) {
x.msg = data.msg;
})
}
DEMO
I have a problem to show INPUT field when do some action.
I have BUTTON (Click here) as soon as user made a click event on button i wanted to show input field
I have done this by using jQuery.
Can any one help me in Angular.js
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.boxShow = false;
});
</script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
show box
<div ng-show="boxShow">
<textarea rows="4" cols="50">text</textarea>
</div>
</div>
</div>
https://jsfiddle.net/bxwjpmaa/1/
HTML
<div class="btn btn-primary" ng-click="openTextBox();">Click Me To open text box</div>
<div ng-show="openTextBox == true">
<input type="text"/>
</div>
SCRIPT :
$scope.openTextBox = function () {
$scope.openTextBox = true;
}
please don't take scope variables and function names same
example here
$scope.openTextBox = function () {
$scope.openTextBox = true;
}
//this is not correct as per angular documentation because scope.openTextBox name already assigned to scope function,again its assigning scope variable "$scope.openTextBox = true" here u will get errors when ever u clicked div second time" TypeError: boolean is not a function" it will throw this error.so please dont use which is already assigned scope function dont assign scope variable
see this fiddle url : https://jsfiddle.net/veerendrakumarfiddle/bxwjpmaa/2/
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ol>
<li ng-repeat="element in elements">
<input type="text" ng-model="element.value"/>
</li>
</ol>
<br/>
<b>Click here to add Textbox:</b><br/><input type="button" value="New Item" ng-click="newItem()"/>
<br/>
<br/>
<b>Click here to see ng-model value:</b><br/>
<input type="button" value="submit" ng-click="show(elements)">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var counter=0;
$scope.elements = [ {id:counter, value : ''} ];
$scope.newItem = function(){
counter++;
$scope.elements.push( { id:counter,value:''} );
}
$scope.show=function(elements)
{
alert(JSON.stringify(elements));
}
});
</script>
</body>
</html>