I have some problem to make get data without click some button. In my html I give ng-click to get data from http.get but if without ng-click I cannot get data.
This my HTML
<ion-list>
<ion-item class="animate-repeat" ng-repeat="repeat in rep">
{{jk}}
<div>
<img class="img-responsive" ng-src="https://omg-indonesia.com/2017-06-15.png" />
</div>
<div>
<select ng-options="size as size.code for size in sizes"
ng-model="item"
style="background-color:#262261;color: white"
ng-change="update(item)">
</select>
</div>
<button type="submit" ng-click="kk(repeat)"></button>
<p>Hasil trip history untuk tanggal {{repeat | date: "dd-MM-y"}}</p>
</ion-item>
</ion-list>
and this JS
$scope.kk = function (repeat) {
kaka.list($scope.item.code, repeat).success(function (data) {
console.log(repeat);
});
};
$scope.jk = function (repeat) {
kaka.list($scope.item.code, repeat).success(function (data) {
console.log(repeat);
});
};
My issue is, when I click button console.log(repeat) in kk have data from http.get but in jk no data in console.log(repeat), is there anyone who can help me? Thanks
Because you are not calling the function,
change it as,
<button type="submit" ng-click="kk(repeat);jk(repeat)"></button>
in your case jk is a function with required parameter repeat. You should provide this parameter to function, otherwise inside function it will be undefined
Try this: {{ jk(repeat) }}
Just as #Sajeetharan said.
No function calls here. {{ jk }} is only going to output the value of $scope.jk if it is an object/string/integer etc and not invoke a function.
Take a look at this from the angular Developer Guide for templates.
Related
any help about who insert html with Angular code inside the html string.
Example:
<div class="container">
<span class='btn' onclick="javascript: clicklink()">click here</span>
<div name="content" id="content">
</div>
</div>
<script>
function clicklink(){
$("#content").html("<span class='label label-danger'>Invoice</span>"+
" <div ng-app ng-init='qty=1;cost=2'> <b>Total:</b> {{qty * cost | currency}} </div>");
}
</script>
Example click here
If you're looking for a 'Hello World' kind of example, this is probably as basic as it gets.
https://code-maven.com/hello-world-with-angular-controller
Maybe the example doesn't make sense, but here is the thing maybe exist another way to do that. I have a project with c# MVC and for render some Views I use ajax
Javascript to load modal into View:
function Edit(){
$.ajax({
url: '../Controller_/Action_',
type: 'POST',
datatype: "html",
traditional: true,
data: { data1: data1 },
success: function (result) {
$('._container').html(result);
},
error: function (result) { }
});
}
MVC c# code:
public ActionResult Edit()
{
...\ code \...
return PartialView("/View/_Edit", model);
}
View Main:
Open Modal
<div name="_container">
<!-- Here load body of modal -->
</div>
Partial view (Edit) return by Action (Edit) in Controller . Should be a modal structure:
<div name="_editModal">
#html.LabelFor( x => x.Name)
#html.EditorFor( x => x.Name)
<div ng-app ng-init="qty=1;cost=2">
<b>Invoice:</b>
<div>
Quantity: <input type="number" min="0" ng-model="qty">
</div>
<div>
Costs: <input type="number" min="0" ng-model="cost">
</div>
<div>
<b>Total:</b> {{qty * cost | currency}}
</div>
</div>
</div>
As already stated by a bunch of people in the comments and other answers this is absolutely bad practice. But there is also a built-in option to solve your problem with pure AngularJS using $compile.
In order to make that work you need to place everything inside a controller or directive and inject the $compile service accordingly.
You need to use the $compile service to produce a function of your dynamic HTML markup which is able to consume a scope object as a parameter in order to produce a working AngularJS template.
After inserting your template, you need to trigger the AngularJS digest cycle using $apply.
<div class="container" ng-controller="MyController">
<span class='btn' ng-click="clicklink()"">click here</span>
<div name="content" id="content">
</div>
</div>
<script>
app.controller("MyController", function($scope, $compile) {
var template = "<button ng-click='doSomething()'>{{label}}</button>";
$scope.clicklink = function(){
$scope.apply(function(){
var content = $compile(template)($scope);
$("#content").append(content);
});
}
});
</script>
Edit: Thanks to Simon Schüpbach, I was able to resolve the issue by changing the template. See the end for the solution.
Let's preface this by saying that we are beginner to soft-intermediate in Angular.
On one of our project, we are using angularjs 1.4.x and also ng-cart (https://github.com/snapjay/ngCart). It worked great but then we were confronted with a demand from our client that created new weird issues.
We added fsCounter, as a directive, to the cart page so user can add or remove items. This all work great but the users also have the option to delete an item from the cart view. Deletion works as expected BUT it seems to affect the scope to the item that takes it place.
Let me make it clearer :
Let's say we have 2 products in our cart page, it displays something like that
Product_1 {price} {counter} {total} delete_btn
Product_2 {price} {counter} {total} delete_btn
Each fsCounter is its own scope
return {
restrict: "A",
scope: {
value: "=value",
index: "=index"
},
link: //other logic
However when we delete the first item, visually and in the directives, the data seems to shift. So our second row will now inherit the first row's counter.
Directive's data looks like this:
Product_1:
itemId:3,
quantity:2,
{other data}
Product_2:
itemId:8,
quantity:5,
{other data}
But once we delete the first directive (We get the scope, remove the DOM element, destroy the scope) the second directive will now have this data:
Product_2:
itemId:3,
quantity:2,
{other data}
Here is the template code :
<div class="unItem" ng-repeat="item in ngCart.getCart().items track by $index">
<div class="photo"><img src="{[{ item.getImage() }]}" alt=""></div>
<div class="details">
<h3>{[{ item.getName() }]} <span>{[{ item.getPrice() | currency:$}]}</span></h3>
<md-select ng-model="attributes" placeholder="Attribut" class="select-attribut" ng-show="item.hasAttributes()" ng-change="item.updateSelected(attributes)">
<md-option ng-repeat="attr in item.getAttributes()" ng-selected="attr == item.getSelected()" ng-value="attr">{[{ attr }]}</md-option>
</md-select>
</div>
<div class="quantity">
<div fs-counter-dynamic value="itemQuantity"
data-min="1"
data-max="999"
data-step="1"
data-addclass="add-quantity"
data-width="130px"
data-itemid="{[{ item.getId() }]}"
data-editable
ng-model="itemQuantity"
name="quantity" id="quantity-{[{ item.getId() }]}",
index="{[{ item.getId() }]}"
></div>
</div>
<div class="total">Total : {[{ item.getTotal() | currency }]}</div>
<div class="delete"><a ng-click="ngCart.removeItemById(item.getId());"></a></div>
</div>
Is this normal behavior? Is there any way to force the directive to keeps its own data? From what I've understood, each directive has its own scope, so what I think happens is that, when we remove the first one, it keeps the data stored in some kind of array that says "directive 1 data is : " and when we delete the first directive, the second one becomes the first.
So basically, are we doing anything wrong or is there anyway to remap the data?
Hope it was clear enough,
Thanks!
Edit: added html code
Edit2: Answer :
New FsCounter template looks like this:
<div fs-counter-dynamic value="item._quantity"
data-min="1"
data-max="999"
data-step="1"
data-addclass="add-quantity"
data-width="130px"
data-itemid="{[{ item.getId() }]}"
data-editable
ng-model="item._quantity"
name="quantity" id="quantity{[{ item.getId() }]}"
></div>
Do you know ng-repeat, then you don't have such problems
<div ng-repeat="product in products">
<fs-counter index="product.index" value="product.value"></fs-counter>
</div>
and in your controller
$scope.products = [
{index:1, value:"Cola"},
{index:2,,value:"Fanta"}
]
to remove an element you just have to do
$scope.products.splice(0,1);
Edit:
I suggest to save all necessary data inside the item you use inside ng-repeat. Your problem is, that you mix data from array with other data from your $scope. It is possible to $watch changes in your directive, but if you set them with ng-repeat everything is done automatically.
$scope.products = [
{index:1, name:"Cola", price:1.50, image:"your/path.png", attributes:{...}},
{index:2, name:"Fanta", price:1.40, image:"your/path.png"}
]
And then in your html
<div class="unItem" ng-repeat="item in ngCart.products track by $index">
<div class="photo"><img ng-src="item.image" alt=""></div>
<div class="details">
<h3>{{item.name}} <span>{{item.price | currency}}</span></h3>
</div>
<div class="quantity">
<div fs-counter-dynamic value="item.quantity"
data-min="1"
data-max="999"
data-step="1"
data-addclass="add-quantity"
data-width="130px"
data-itemid="item.index"
data-editable
ng-model="item.quantity"
name="quantity" id="{{'quantity-' + $index}}",
index="item.index"
></div>
</div>
<div class="total">Total : {{ item.price * item.quantity | currency }}</div>
<div class="delete"><a ng-click="ngCart.removeItemById(item.index);"></a></div>
</div>
Hi I have following data i get using factory in angular.
$scope.data=[{actId:12, acctName: "Tom James"}, {acctId:20, acctName: "Lisa Anderson"}]
In my html code I am using ng-repeat to display just the name.
<div ng-repeat=" record in data">
<div>{{record.acctName}}</div>
<div><button ng-click="getDetails(record)">Get Details</div>
</div>
In my controller I have
$scope.getDetails=function(record)
{
alert(record.actId)
}
In my controller I am trying to see if acctId is passed I get undefined error. Please let me know how I can pass the current record with all of its fields.
Thanks
There is spelling mistake use record.actId insted of record.acctId
If you want to get actId then you have to pass actId in getDetails function.
<div ng-repeat=" record in data">
<div>{{record.acctName}}</div>
<div><button ng-click="getDetails(record.actId)">Get Details</div>
</div>
in Controller
$scope.getDetails=function(actId)
{
alert(actId);
}
If you want to pass both accName and actId then here is the code for do this:-
<div ng-repeat=" record in data">
<div>{{record.acctName}}</div>
<div><button ng-click="getDetails(record.acctName,record.actId)">Get Details</div>
</div>
In Controller
$scope.getDetails=function(acName,actId)
{
alert(acName);// this is for name
alert(actId); //For Id
}
I'm developing an Angualr application where we have a Map object (as shown below). The key and value of the map object (headerObj) are coming from user as input to the app,
var headerObj = new Map();
headerObj.set(key,value);
I'm iterating through them using foreach as shown below, the output is coming as expected
$scope.inputHeaders.forEach(function (headerkey, headervalue) {
console.log(headerkey, headervalue;
});
but I have to show this map values in UI, which again user can edit, so I have binded them
<li class="list-group-item" ng-repeat="header in inputHeaders">
<div ng-repeat="(key, value) in header">
{{key}} : {{value}}
</div>
</li>
I've googled and tried several ways, but nothing did help, so basically I've wanted to know how can I iterate over a map using forEach in angular?
Just to give more clarity my requirement is something like that: I need values to be passed to the server as key, value pair, only if I'm not wrong, suppose if I use object properties the key of the object will be fixed something like
{"key":"Content-Type","value":"application/x-www-form-urlencoded","$$hashKey":"003"}]
but my server is expecting something like
"Content-Type" => "application/x-www-form-urlencoded"
Created an plunkr edit http://plnkr.co/edit/t2g6Dl831HGyjD6uSdf3?p=preview
AngularJS 1.x does not know how to use Javascript iterators, so you'll have to convert the Map object to an Array first using Array.from().
Controller:
$scope.inputHeadersArray = Array.from($scope.inputHeaders);
View:
<li class="list-group-item" ng-repeat="header in inputHeadersArray">
{{header[0]}} : {{header[1]}}
</li>
you can use :
[...headerObj] or [...headerObj.entries()] to got two dimensions array. and iterate them.
or [...headerObj.keys()] and [...headerObj.values()] for regular array.
here are few changes in your code. http://plnkr.co/edit/gpc1mPsZrl2QVXbnWZKA?p=preview
app = angular.module('testDemo', []);
app.controller('submitCtrl',function($scope) {
$scope.header={};
$scope.inputHeaders=[];
$scope.addHeader = function() {
$scope.inputHeaders.push($scope.header);
$scope.header = {};
$scope.header.key='';
$scope.header.value='';
}
$scope.log=function(){
//alert('in log');
$scope.inputHeaders.forEach(function (key, value) {
console.log(key, value);
});
}
});
HTML:
<body ng-controller='submitCtrl'>
<div >
<input type="text" class="=form-control" ng-model="header.key" placeholder="Key">
<input type="text" class="=form-control" ng-model="header.value" placeholder="value">
<button class="btn btn-sucess" ng-click="addHeader()">Add</button>
<button class="btn btn-sucess" ng-click="log()">Log</button>
<div>
<ul class="list-group">
<li class="list-group-item" ng-repeat="header in inputHeaders">
<!-- need to to work on this logic -->
<div ng-show="inputHeaders.length>=1">
<input type="text" ng-model="header.value" />
<input type="text" ng-model="header.key" />
</div>
</li>
</ul>
</div>
</div>
</body>
I am a newbie in angularjs and needs to pass a model bind value in a function which is declared in controller but when I accesss that value from controller it says undefined. Below is the code
HTML:
<div>
<p g-bind-template>{{model.myname}}</p>
<div>
<div data-ng-controller="formCtrl" data-ng-init="init(model.myname)"></div>
</div>
</div>
In the above HTML when i do {{model.myname}} I can see the value but how to pass it in init method.
In Controller I have wrote a function
$scope.init = function (myname) {
alert(myname) // displays undefined
};
Your paragraph tag should be within the ng-controller in html. Make it like this:
<div>
<div>
<div data-ng-controller="formCtrl" data-ng-init="init(model.myname)">
<p g-bind-template>{{model.myname}}</p>
</div>
</div>
</div>