I am new to the AngularJs framework and I need some help with a couple questions.
I have tried to find information on the internet and by looking through tutorials but many of them are incomplete.
I have another problem: I must make a Web Application that will run on Phone Gap, but I don't know how to use a client side language. And I cant use JSP, etc
I read a Json file that's hosted on the server and parsed by Angular. Now when I want to do something with information I cant find how.
First: I want to take the number of the people that use the Tablet/Movil (like a loggin but not a loggin)
HTML part
<body>
<div ng-app="index" ng-controller="Ctrl1">
<p>
Indicar numero del grupo <input type="text" ng-model="numero">
</p>
Continuar
</div>
Looking on internet I find that you can use the following controller:
var app = angular.module('index', []);
app.factory("MyService", function() {
return {
data : {}
};
app.controller("Ctrl1", function($scope, $location, MyService) {
$scope.goTo2 = function() {
MyService.data.numero = $scope.numero;
$location.url("sugerencias.html");
};
app.controller("Ctrl2", function($scope, MyService) {
$scope.numero= MyService.data.numero;
And the HTML
<body>
<h1>Carta de Pedidos</h1>
<div ng-controller="Ctrl2">
<p>El numero de personas interesadas es : {{numero}}</p>
</div>
Obviously it doesn't work, and I need a small example that can help me to understand How to send the params to other
HTML
Second problem:
When I make a table with information by Json (dynamic information), that has a check box in each row, How can i know which row has been checked?
It`s possible that this question will be easy to experts but I am sure that I have not found the answer on the internet yet so I'm trying here.
Thanks to all people!!! =)
After looking many information on other pages and documentation, Angular its only used to make ONE PAGE webs. This kind on work its not eficcient on this framework. You must use differents divs that share information between them but dont move the information to other HTMLS.
Related
I am using intercooler.js in a django project.
http://intercoolerjs.org
<div id=right_side>
<form ic-post-to="{% url 'update-task-ajax' %}" ic-target="#right_side">
[...]
</form>
</div>
The form itself gets reloaded in the div #right-side after the first (working) use and after that intercooler is not working anymore. How to fix this?
Update:
Looks like i have to use
Intercooler.ready(func(elt))
http://intercoolerjs.org/reference.html
But i'm stuck how to use it properly.
I don't see anything wrong about this, the form should keep submitting and targeting #right_side each time, unless you are replacing it somehow. I don't see why Intercooler.ready() is necessary, given the code. Can you clarify what are trying to accomplish?
I'm availabe on the gitter chat for intercooler to help:
https://gitter.im/intercooler-js/Lobby
I am using the isteven-multi-select to display select options from DB. Unfortunatelly it could be really large array (from "a few" to "+100K" records). That is the reason why I use a smart select with a filter. Is there any way how can I set limit of rendering options to improve performance? Currently the large array drop down a js and a firefox.
My select:
<div isteven-multi-select
input-model="data.select.options"
output-model="data.select.data"
button-label="label"
item-label="id label"
tick-property="ticked"
max-labels="4" >
</div>
Controller:
...
DataInfoResource.query(
function(data) {
$scope.data.select.options = data;
console.log(data);
}
);
....
I also tried select2 but I do not find any way how to do it.
Thanks for any advice.
This is what I did when the list size is more. Not sure if it would work for 100k records but still you can try. It really worked well for 6k record.
Modified the template in isteven-multi-select.js as follows
'ng-repeat="item in filteredModel | filter:removeGroupEndMarker" class="multiSelectItem"'
to
'ng-repeat="item in filteredModel | filter:removeGroupEndMarker | limitTo:100" class="multiSelectItem"'
May be try this one:
<div isteven-multi-select ... max-height="250px"></div>
PS. I can't add a comment because the following answer
I have a project where I'm currently trying to refactor an old system that was hinged on jquery from the ground up with angular 1.x. However, there are a lot of old HTML forms that I'd like to reuse the bulk of so I don't want to recreate them. I'd love it if there was a way to keep it purely angular, but I'm honestly at a loss of how I'd do that (or whether or not I can). I'm fairly new to angular so there are a lot of inner workings to it that I'm still not privy to.
I've searched around on google and other places including here and I can't really even find other people talking about it. That tells me that either I'm searching badly or it's something that I should probably not be working towards.
All the html pages have identically id'd fields so I feel I can reliably base things on that. For example: all forms with first name text boxes have an id of "cl_fname".
Is there anyway that I can accomplish: getting the form, adding an ng-model="cl_fname" or something to the relevant tag and then display the form? I've gotten to the point where I can get the html page, hold it in the scope and then display using ng-bind-html, but figuring out how to add angular attributes to specific elements I can't figure out.
You can achieve this with jQuery and the attr() method.
I created a plunker here that demonstrates adding angular to an existing "plain" html form.
In the example, I'm using id selectors, but you could use any combination of selectors to ensure you get the right elements.
The below is a quick code snippet from my Plunker example:
HTML:
<div ng-app="myApp">
<form id='myForm1' data-test="test2">
<span>First Name:</span>
<input type="text" id="myForm1_firstName" />
<input type="submit" id="myForm1_Submit" value="Go!" />
</form>
</div>
JS:
// set up angular
var myApp = angular.module('myApp', []);
myApp.controller('MyForm1Controller', ['$scope', function($scope) {
$scope.firstName = 'Angular Working!';
}]);
// use jQuery to add the relevent attributes to our form
var jqMyForm1 = $('form#myForm1');
var jqTxtFirstName = jqMyForm1.find('input[type="text"]#myForm1_firstName');
//add controller to form
jqMyForm1.attr('ng-controller', 'MyForm1Controller');
//bind the textbox to the angular 'firstName' variable
jqTxtFirstName.attr('ng-model', "firstName");
EDIT:
just realised you want to load the html form dynamically.
Version 2 of the plunker (here) will now dynamically load a HTML form from an external resource (separate html page), inject it into the current page, add the angular bindings to it, and then get angular to recognise it.
The key to getting angular to recognise the form is the use of the $compile object (angular $compile documentation).
Again, quick snippets of the code in use:
HTML (main page):
<div ng-app="myApp" ng-controller="LoadingController"></div>
HTML (myForm1.html):
<form id='myForm1' data-test="test2">
<span>First Name:</span>
<input type="text" id="myForm1_firstName" />
<input type="submit" id="myForm1_Submit" value="Go!" />
</form>
JS:
// set up angular
var myApp = angular.module('myApp', []);
// main controller for loading the dynamic form
myApp.controller('LoadingController', ['$scope','$http','$compile', function($scope,$http,$compile) {
$scope.loadHtmlForm = function(formURL) {
$http.get(formURL).then(function successCallback(response){
var jqForm = $(response.data);
var jqTxtFirstName = jqForm.find('input[type="text"]#myForm1_firstName');
//add controller to form
jqForm.attr('ng-controller', 'MyForm1Controller');
//bind the textbox to the angular 'firstName' variable
jqTxtFirstName.attr('ng-model', "firstName");
$('div').append(jqForm);
$compile(jqForm[0])($scope);
});
}
$scope.loadHtmlForm('myForm1.html');
}]);
// form controller for managing the data
myApp.controller('MyForm1Controller', ['$scope', function($scope) {
$scope.firstName = 'Angular Working!';
}]);
I am using kendo window with AngularJS in the following way.
HTML Code
<div kendo-window="showProspectDetailWindow" k-title="'Prospect Detail window'"
k-width="" k-height="" k-visible="false"
k-content="{template:confirmationWindowTemplate}"
k-on-open="" k-on-close=""></div>
JavaScript Code
$scope.confirmationWindowTemplate = 'Are you sure you want to delete?<br />This data will not be recoverable, do you want to continue ?<br /><div class="pull-right"><button class="k-primary" ng-click = "yesButton()">Yes</button><button class="k-button" ng-click="noButton()"> No</button></div>';
I have created a model in the script in the following way
$scope.createProspectDetailModel = function(data)
{
$scope.prospectDetail.AccountId = data.AccountId;
$scope.prospectDetail.BusinessType = data.BusinessType;
$scope.prospectDetail.FirstName= data.FirstName;
}
The above code works. With the help of debugger I can verify that the values from the data field are going into each of the $scope.prospectDetail value. However, when I change my template into
$scope.confirmationWindowTemplate = 'Are you sure you want to delete {{prospectdetail.FirstName}}'
It doesn't work. I also tried
$scope.confirmationWindowTemplate = 'Are you sure you want to delete {{#= prospectdetail.FirstName #}}'
but it doesn't work as well. I have referred this link on SO but didn't help. I have searched a lot but still cannot find the solution to this. Any help would be appreciated.
Ok. I found the answer myself. I changed the HTML Code . Removed the k-content
<div kendo-window="confirmationWindow" k-title="'Confirmation window'"
k-width="" k-height="" k-visible="false"
k-on-open="" k-on-close=""></div>
and assigned it in the script
$scope.confirmationWindow.content('Are you sure you want to delete'+ $scope.prospectDetail.FirstName '?<br />
I am trying to change input value in particular web site from chrome extension. In order to do that I am using jQuery in my content script. It works in most of the cases, but I didn't manage to change value of the input when it is part of AngularJS view. I found the same problem when I use let say kendoUI. I am trying to set the value calling $('element').val('value') and then try to call blur and change event, but without any success.
I went through may be 99% of the posts related to this topic, but still can't find working solution.
You just need to Call $scope.apply() in order to let angular know about updating the bindings. This is mainly because by default, angular doesn't know anything about the changes you are making in jQuery.
Below is a sample code, and here is a jsFiddle. Hope this helps.
app.controller('testCtrl', ['$scope', function ($scope) {
$scope.changeValue = function() {
$('#test').val("new Value");
$scope.apply();
}
<div class="form-inline">
<input type="text" id="test" value="test">
<input type="submit" value="submit" ng-click="changeValue()">
</div>