How do I add Angular functionality to newly-added HTML? - javascript

I have an HTML page with Angular. I want to click a button that adds an Angular input tag to the DOM. But when I do so, the new input text field does not seem to work the way I would expect it.
My HTML looks like this:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
var app= angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
});
$(function(){
$("#button").click(function(){
$("body").append("<input type=\"text\" ng-model=\"bar\"><br>{{bar}}");
});
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<button id="button">click me</button>
<input type="text" name="something" ng-model="foo"><br>
{{foo}}
</body>
</html>
I can use Angular's functions just fine when with the input tag already there. When I type something in the text field, the output appears. But when I click the button and the new input text field comes up, typing in it does nothing.
What am I missing?
How do I fix this?

You can't mix JQUERY and Angular in the way you are doing it. You have to choose one framework and stick to its principles.
In order to add a control the "View" in angular you could use "Directives". Another options is to have an object in your Model and the chances to this object will interact with your controller and this will inform the View to add another control.
Angular is an MVC framework therefore you should not manipulate the View(html) through another framework. Angular was meant to fix and simplify this manipulations with a proper separation or layers.
You can refer to this other post on how to perform this:
How to dynamically add input rows to view and maintain value in angularjs ng-model as array item

To do it in AngularJS:
<body ng-app="myApp" ng-controller="myCtrl">
<button id="button" ng-click="showBarInput=true">click me</button>
<div ng-show="showBarInput">
<input type="text" ng-model="bar"><br>
{{bar}}
</div>
<input type="text" name="something" ng-model="foo"><br>
{{foo}}
</body>
The AngularJS framework is a Model-View-Whatever framework. The model drives the view. In this case, $scope.showBarInput controls the visibility of the elements.

Related

Inserting text into HTML from AngularJS

In my index.html file, I have created a very bare-bones form. I have separated much of the detail into app.js so that if someone wants to have their version of the form look different, they just have to insert a modified copy of app.js (trying to go for portability here).
However, I am very new to AngularJS, which is what a lot of app.js is using. I could use some help please!
Here is a code snippet that I'm having some trouble with:
<body ng-controller="controller">
<div class="page">
<section class="signin">
<form name="form" novalidate>
<div class="intro">
<label ng-model="service-desk-name"></label>
<span ng-bind="service-desk-name"></span>
<label ng-model="welcome"></label>
<span ng-bind="welcome"></span>
</div>
Coupled with:
var app = angular.module('app',[]);
app.controller('controller', ['$scope', function($scope) {
$scope.service-desk-name = 'Arbitrary Service Desk Name';
$scope.welcome =
'Please sign in and a consultant will be with you shortly.';
}]);
Because I may be doing something dreadfully wrong, I'll explain what I want to do. The intro section is displayed above the actual form, showing the service desk name, and some kind of custom welcome or informational message through ng-model="service-desk-name" and ng-model="welcome", respectively. My hope is that I can get the HTML to grab value of these two models that I define in app.js. This way, the HTML doesn't control what is displayed, it just grabs what is defined and displays it.
Right now, these fields are not showing up at all on the webpage, indicating that there's just some kind of syntax error. I'm so new to Angular so I don't really know what to try to fix it from here.
replace
<label ng-model="service-desk-name"></label>
with
<label>{{service-desk-name}}</label>
ng-model means that you want bi-directional binding, and is used for example with inputs, so that when you start typing into the input, the value is stored inside anything that you reference through ng-model, i.e.
<input type="text" ng-model="inputValue" />
will save the input into $scope.inputValue
{{}} means you want to output something from the controller in the view.
Variable name can not have most special character (except _, $) when you are defining directly after a .(dot). This is the reason where controller code is throwing an error, since nothing is getting rendered on page.
You could define that property by specifying key over $scope object like
$scope['service-desk-name'] = 'Arbitrary Service Desk Name';
Additionally the ng-model would work on input element only, but you are using over label. Do below change to welcome as well.
<input ng-model="service-desk-name"/>
But Ideally you shouldn't be define scope variable in such format.
Preferred way would be to use camelCase while defining variables.
Agree with Pankaj Parkar
Also you can't get value in this case because you don't set "ng-app"
plnkr link
var app = angular.module('app', []);
app.controller('myController', function ($scope) {
$scope.serviceDeskName = 'Arbitrary Service Desk Name';
$scope.welcome = 'Please sign in and a consultant will be with you shortly.';
});
<!DOCTYPE html>
<html ng-app="app"> <!-- For example define your app module name here -->
<head>
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="myController">
<div class="page">
<section class="signin">
<form name="form" novalidate>
<div class="intro">
<label ng-model="serviceDeskName"></label>
<span ng-bind="serviceDeskName"></span>
<hr>
<label ng-model="welcome"></label>
<span ng-bind="welcome"></span>
</div>
</form>
</section>
</div>
</body>
</html>

Simple angular binding

I did a very little application, but binding not working as model to object. How is it possible?
angular.module("simpleapp", [])
.controller("Controller", ['$scope', function($scope) {
$scope.sample = {};
$scope.sample.input = 4;
}]);
<body ng-app = "simpleapp" >
<input ng-model="sample.input" type="text" value="text" />
<div ng-controller = "Controller"><p>input "{{sample.input}}"</p></div>
</body>
You are using simpleapp in HTML and just app in your JS.
They have to be the same in order to work correctly.
Plus you put the input with the scope variable outside the controller. It should be inside.
For example you can edit your html like this:
<body ng-app="app" ng-controller="Controller">
<!-- other divs here -->
</body>
You have to update your body tag from <body ng-app="app"> and then you have put put your input inside the scope of your controller
<body ng-app="app">
<div ng-controller = "Controller">
<input ng-model="sample.input" type="text" value="text" />
<p>input "{{sample.input}}"</p>
</div>
</body>
The answers by Atul,NV Prasad and fbid are absolutely correct.You can view the DEMO here.
One thing that they have missed out is another way to bind your elements to the angular variable.That is using ng-bind.It is used as follows:
<p ng-bind="sample.input"></p>
What's the difference between ng-bind="sample.input" and
{{sample.input}}?
When you load the page, with the {{}} notation, you will see the curly brackets until the angular content is rendered.In the case of ng-bind, you won't.
For more details:LINK and this answer specifically
Use Proper Angularjs Version Library .You need to Go through Angularjs Doucmentation and Try to Understand by experimenting . That Makes you Strong
Some Beginner Mistakes :-
You Should write all the code after assigning Controller to Html
Element . Otherwise Your Code Don't Work even if it is Correct . You need
to assign a variable to Use.
html Code sample (understand Your mistake by taking look at code or the Below Plunkers :-) :-
<body ng-controller = "sampleController">
<input ng-model="sample.node" type="text" />
<p>input "{{sample.node}}"</p>
<input ng-model="sample1" type="text" />
<p>input "{{sample1}}"</p>
</body>
Controller Coding :-
angular.module("sampleApp", [])
.controller("sampleController", ['$scope', function($scope) {
$scope.sample = {'node':1};
$scope.sample1 = 'my first default value';
}]);
Here we go Simple Binding Example :-
http://jsfiddle.net/cmckeachie/Y8Jg6/
Plunker With Little More Concept of Data binding :-
https://plnkr.co/edit/TmAsSCKQDHfXYEbCGiHW?p=preview
Go through Documentation for some more understanding Good Luck !!

Angular js in Dynamically create controls

In my application one block is loaded with the controls dynamically. After loading the dynamic controls the data is update by using the angular js. But the angular js is working with static placed controls. But not with dynamic controls.
Here I placing the dynamic code What I tried to get.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#ren").html('<p>Name: <input type="text" ng-model="name"></p>');
});
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Input something in the input box:</p>
<div id="ren"></div>
<p ng-bind="name"></p>
</div>
<button>click</button>
</body>
</html>
Here the input control dynamically added to the div. The text I enter in control does not appering on paragraph. But this work fine if the input control place in div static.
Am I doing any wrongly. please solve my problem.
Probably your html attached via jquery function, is not registered to angular's watch tree. as a result, it doesn't trigger a digest cycle when you type to input with ng-model. Also this kind of usages angular with jquery in the dom edition level is not recommended. In my opinion, you should use directive instead of that jquery-dom operation
I'd prefer to do it in angular way, rather than mixing jQuery with angular. Because directly adding DOM to angular context will not worked as angular compiled DOM(means angular binding will not work on newly injected DOM). You need to compile that DOM with $compile service with specific scope before injecting it into DOM to enable binding on it.
Lets follow this way, which is fully angular way of doing it. There would be ng-click directive on the button, and will toggle a flag to show and hide element & we will render that array using ng-if
HTML
<p>Input something in the input box:</p>
<div id="ren">
<p ng-if="showName">Name: <input type="text" ng-model="name"></p>
</div>
<p ng-bind="name"></p>
</div>
<button type="button" ng-click="showName!=showName">click</button>

Is it possible for jsrender to render a field name dynamically?

Is it possible to have a dynamic field name in jsrender like this.
{{<cellcontent>}}
Common template as generic one. Cell content value is bound to a datasource. Is it possible?
Your question is not very clear, but if you are asking about using JsRender templates along with data-binding so that when the data changes the rendered result is automatically updated, dynamically, well yes, that is what JsViews is all about: http://www.jsviews.com/#jsviews. (JsViews is a data-binding layer on top of JsRender).
Here is a simple example:
var tmpl = $.templates("#myTemplate"),
data = {name: "Jo"};
tmpl.link("#content", data);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//www.jsviews.com/download/jsviews.js"></script>
<script id="myTemplate" type="text/x-jsrender">
{^{:name}} <br/>
<input data-link="name trigger=true" />
</script>
<div id="content"></div>

Binding an event after a page reload and creating new html element using Knockout.js, HTML and JS only?

I am new to knockout libraries and we are working on an iPad web app. The situation is when a user check a checkbox in a HTML page, we need to add a new div in the page with some text boxes in it and remove it when he uncheck those.
Point to be noted: the new div is binded to data that needs to be default loaded in the text box or selects.
Its an iPad web app. It uses Knockout, jQuery, JS and HTML with MVVM.
The question is, can Knockout bind html elements after the page load, as custom handler works/register themselves only during init and can a dynamic div be created using js and html, if yes then how to put it between two static divs?
You can bind elements after page load using ko.applyBindings(viewModel, ElementSelector), like so:
ko.applyBindings(myModel, $("#myDiv"));
However, this isn't something you generally want to do. It's much easier to use the If binding in Knockout, which will dynamically add or remove child elements from the page.
<input type="checkbox" data-bind='checked: showChild' />
<div id="container" data-bind="if: showChild">
<!-- stuff here will only be generated if the checkbox is selected -->
</div>
If you had multiple different elements to show based on a value of something, say a select list, you could use the template feature instead:
//viewmodel properties
self.Options = ko.observableArray(["Name", "Age", "Height"])
self.TemplateToUse = ko.observable()
//html
<select data-bind="options: Options, value: TemplateToUse">
</select>
<div data-bind='template: { name: TemplateToUse }'>
<!-- template whose name is selected value -->
</div>
//templates
<script type="text/html" id="Age">
<span>Age</span>
</script>
<script type="text/html" id="Name">
<span>Name</span>
</script>
<script type="text/html" id="Height">
<span>Height</span>
</script>

Categories