I have the following thing on my Angular app:
$scope.things = [{
title: 'Simple',
type: 1,
form: {
input: [1, 2, 3],
clone: true
}
}];
$scope.clone = function(item) {
item.form.input.push(Math.floor(Math.random() * 999));
};
And on the HTML part:
<div ng-repeat="item in things" class="item">
<h2>{{item.title}}</h2>
<div ng-repeat="input in item.form.input">
<input type="text" />
</div>
<button ng-click="cloneInput(item)">Clone</button>
</div>
When press the Clone button I'm pushing a new element to form.input array and add a new input to the DOM.
I want to $http.post all the values for the inputs.
I know to push something I need to use
$http.post('/path/to/my/api', {my object}).callback()
But I dont know how to make an object from all the .item inputs.
Can someone explain me how or suggest a better solution?
If you use a ng-model for your inputs and set it to an object you can then inject that object to the post, here is a really basic example:
JSFiddle
HTML:
<div ng-app="myApp" ng-controller="dummy">
<div ng-repeat="input in items">
<input type="text" name="{{input.name}}" ng-model="data[input.name]" />
</div>
<button ng-click="submit()">Submit</button>
<p ng-show="displayIt">{{data}}</p>
</div>
JS:
angular.module('myApp', [])
.controller('dummy', ['$scope', function ($scope) {
$scope.items = [{
name: 'test'
}, {
name: 'test2'
}];
$scope.data = {};
$scope.displayIt = false;
$scope.submit = function () {
// This is only to check it
$scope.displayIt = true;
// Do your post here
};
}]);
Related
If I had some code similar to this, how would I go about calling the getUserName() function inside the ng-repeat. I attempted to do it earlier and it worked, however, it no longer functions.
var user_reviews = [{
user: {
name: "John Doe"
},
review: {
item: "Shure SE215"
}
}]
var app = angular.module("ExApp", []);
app.controller("TestController", function($scope) {
$scope.reviews = user_reviews;
$scope.getUserName = function() {
return $scope.user.name;
}
});
HTML
<div ng-controller="TestController">
<div ng-repeat="review in reviews">
<p>{{review.getUserName()}}</p>
</div>
</div>
You can pass the index from ng-repeat and return the user.name relevant to that index
<div ng-controller="TestController">
<div ng-repeat="review in reviews">
<p>{{getUserName($index)}}</p>
</div>
</div>
var app = angular.module("ExApp", []);
app.controller("TestController", function($scope){
$scope.reviews = user_reviews;
$scope.getUserName = function(index){
return $scope.reviews[index].user.name;
}
});
but if you are using function for this senario only i prefer do it without the function like this
<div ng-controller="TestController">
<div ng-repeat="review in reviews">
<p>{{review.user.name}}</p>
</div>
</div>
Assuming scope.getUserName() isn't as trivial as it is in your example, you can do this instead.
// Pass the `review` object as argument
$scope.getUserName = function(review){
return review.user.name; // get the user name from it
}
HTML, pass review as parameter
<div ng-controller="TestController">
<div ng-repeat="review in reviews">
<p>{{getUserName(review)}}</p>
</div>
</div>
//You can directly access the username
<div ng-controller="TestController">
<div ng-repeat="review in reviews">
<p>{{review.user.name}}</p>
</div>
</div>
//or You can pass the review as parameter and return username from that function.
//HTML
<div ng-controller="TestController">
<div ng-repeat="review in reviews">
<p>{{getUserName(review)}}</p>
</div>
</div>
//JS
$scope.getUserName = function(review){
return review.user.name;
}
You should change your code to this.
<div ng-controller="TestController"><div ng-repeat="review in reviews">
<p ng-repeat="userName in review.getUserName(review.name)">{{userName.name}}</p></div></div>
var user_reviews = [
{
user:{
name: "John Doe"
},
review:{
item: "Shure SE215"
}
}
]
var app = angular.module("ExApp", []);
app.controller("TestController", function($scope){
$scope.reviews = user_reviews;
$scope.getUserName = function(userName){
return $scope.user.name;
}
});
I have a dynamic Array in Controller which has templates(html files) similar to below
$scope.templates =
[ { name: 'template1.html', url: 'template1.html'},
{ name: 'template2.html', url: 'template2.html'} ];
I have a dropdown to choose the template.
I am using ng-include in html to get these files.
The issue is:
When I have loaded template1.html and then switching to template2.html, I want to hide template1.html data and show template2.html.
The next time, when I select template1.html, I want to hide template2.html data and show template1.html data instead of loading template1.html again.
I have tried below:
html:
<div ng-controller="ExampleController">
<select ng-model="template" ng-options="t.name for t in templates">
<option value="">(blank)</option>
</select>
url of the template: <code>{{template.url}}</code>
<hr/>
<div class="slide-animate-container" ng-show="template.isHidden">
<div class="slide-animate" ng-include="template.url"></div>
</div>
<div class="slide-animate-container" ng-hide="template.isHidden">
<div class="slide-animate"></div>
</div>
</div>
app.controller('ExampleController', ['$scope', function($scope) {
$scope.templates =
[ { name: 'template1.html', url: 'template1.html'},
{ name: 'template2.html', url: 'template2.html'} ];
$scope.template = $scope.templates[0];
$scope.$watch('template',function(newValue, oldValue) {
$scope.templates[0].isHidden = true;//will do _.each to update
$scope.templates[1].isHidden = true;
var xyz = $scope.template;
xyz.isHidden = false;
});
}]);
template1.html, template2.html can be normal html files.
Please suggest.
https://plnkr.co/edit/TJKYbDrp1C1g4fQNHCi2?p=preview
This line:
<div class="slide-animate-container" ng-show="template.isHidden">
prob. meant to be:
<div class="slide-animate-container" ng-include="template.url" ng-show="!template.isHidden">
You want to show the div if the value of isHidden is false.
I'm new in AngularJS, I want to create an array and post it to server by register function, here's Controller code:
root.controller('mainController', function($scope) {
$scope.lineItems = [];
$scope.addItem = function (id) {
$scope.lineItems.push(id);
console.log($scope.lineItems);
// gives me right data -> Array [ "1", "2", "3", "4", "1" ]
};
$scope.register = function () {
// post data to server
console.log($scope.lineItems);
// gives me an empty array -> Array [ ]
};
});
Here's HTML code and directives:
<div class="container" ng-controller="mainController">
<a ng-click="register()"></a>
<div ng-repeat="product in products">
<a class="btn" ng-click="addItem(product.id)">Add</a>
</div>
</div>
The problem occurs when i want to call register function, it gives me an empty array instead of array elements while it's not gonna happen in addItem function.
This is your code and work correctly.
var app = angular.module("testApp", []);
app.controller('testCtrl', function($scope){
$scope.products = [{id:1},{id:2},{id:3},{id:4}];
$scope.lineItems = [];
$scope.addItem = function (id) {
$scope.lineItems.push(id);
console.log($scope.lineItems);
// gives me right data
};
$scope.register = function () {
// post data to server
console.log($scope.lineItems);
// gives me an empty array
};
});
<div ng-app="testApp" ng-controller="testCtrl">
<a ng-click="register()">Register</a>
<div ng-repeat="product in products">
<a class="btn" ng-click="addItem(product.id)">Add : {{product.id}}</a>
</div>
</div>
I have a form that I want to build at run time via js and use it in a form controller in angularjs.
As you can see in the following example, it is not being thrown as html, and i want it to be binded to the model variable. http://jsfiddle.net/g6m09eb7/
<div>
<form ng-controller="TodoCtrl" ng-submit="blabla()">
<div ng-repeat="field in fields">{{field.input}}</div>
</form>
</div>
function TodoCtrl($scope) {
$scope.model = {
'FirstName': 'Test',
'LastName': 'Test Last'
}
$scope.fields = [{
input: '<input type="text" ng-model="model.FirstName">'
}, {
input: '<input type="text" ng-model="model.LastName">'
}, ];
}
First, I'm going to show you how to make this work as you're trying to accomplish it, for the sake of being informative. This is not the approach you should use to solve your overall problem. This example will get the html in the document, but it won't be compiled with Angular. To do that, you would have to have a different directive, like this (click). This is all kinds of a bad approach.
angular.module('myApp', [])
.controller('TodoCtrl', function($scope) {
$scope.fields = [{
input: '<input type="text" ng-model="model.FirstName">'
}, {
input: '<input type="text" ng-model="model.LastName">'
}, ];
})
// filter to make Angular trust the html
.filter('safeHtml', ['$sce', function ($sce) {
return function (text) {
return $sce.trustAsHtml(text);
};
}])
;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form ng-app="myApp" ng-controller="TodoCtrl">
<!-- use ng-bind-html on trusted html to bind it (see the js) -->
<div ng-repeat="field in fields" ng-bind-html="field.input | safeHtml"></div>
</form>
Instead, you can do this naturally. Just use the properties of your object as the criteria for ng-repeat. Simple and clean!
angular.module('myApp', [])
.controller('TodoCtrl', function($scope) {
$scope.model = {
'FirstName': 'Test',
'LastName': 'Test Last'
};
})
;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form ng-app="myApp" ng-controller="TodoCtrl">
<div ng-repeat="(key,value) in model">
<input type="text" ng-model="model[key]"/>
</div>
</form>
Be sure to avoid concerning your controller with DOM manipulation. If you have html snippets in a controller, your approach is probably off track. DOM manipulation should be done entirely with directives.
I am trying to create a page where you have few items in a list group which when selected should show more details.
Please view the example here http://plnkr.co/edit/Oava3pA9OTsm80K58GdT?p=preview
How can I populate the details from the json file based on the item that is selected in the list group?
This is what I have so far.
html:
<div ng-controller=ItemsController>
<h3>Test</h3>
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<ul class="list-group">
<a class="list-group-item" ng-repeat="item in itemDetails">{{item.name}}</a>
</ul>
</div>
</div>
<div class="col-md-8">
<div class="panel panel-default">
<h2>Name: </h2>
<br />Address Line 1:
<br />Address Line 2:
<br />Suburb:
<br />Phone:
<br />Email:
</div>
</div>
</div>
</div>
script:
var myItemsApp = angular.module('myItemsApp', []);
myItemsApp.factory('itemsFactory', ['$http', function($http){
var itemsFactory ={
itemDetails: function() {
return $http(
{
url: "mockItems.json",
method: "GET",
})
.then(function (response) {
return response.data;
});
}
};
return itemsFactory;
}]);
myItemsApp.controller('ItemsController', ['$scope', 'itemsFactory', function($scope, itemsFactory){
var promise = itemsFactory.itemDetails();
promise.then(function (data) {
$scope.itemDetails = data;
console.log(data);
});
}]);
json:
[
{
"$id":"1",
"name":"Test itemName 1",
"themeName":"ASD",
"addressLine1":"18 Banksia Street",
"addressLine2":null,
"suburb":"Heidelberg",
"state":"VIC",
"postalCode":"3084",
"contactPhone":"+61 3 123456",
"emailAddress":"qwerty.it#xyz.com"
},
{
"$id":"2",
"name":"Test itemName 2",
"themeName":"WER",
"addressLine1":"11 Riverview Place",
"addressLine2":"Metroplex on Gateway",
"suburb":"Murarrie",
"state":"QLD",
"postalCode":"4172",
"contactPhone":"1300 73123456",
"emailAddress":"asdfg.it#xyz.com"
},
{
"$id":"3",
"name":"Test itemName 3",
"themeName":"ERT",
"addressLine1":"60 Waterloo Road",
"addressLine2":null,
"suburb":"North Ryde",
"state":"NSW",
"postalCode":"2113",
"contactPhone":"123456",
"emailAddress":"zxcvb.it#xyz.com"
}
]
Any help would be greatly appreciated.
I am very new to programming. Please also feel free to alternative ways of achieving this if I have done it wrong.
You can use the ng-click directive to specify what happens when you click something.
So I made it assign the clicked item to the $scope.selected object using a function ($scope.select(item)) and then I bound the properties of that object to your little details section. That's probably the simplest way to do it.
Ctrl
$scope.select = function(item) {
$scope.selected = item;
}
$scope.selected = {};
HTML
<a class="list-group-item" ng-click="select(item)" ng-repeat="item in itemDetails">
{{item.name}}
</a>
And the selected object is then available like this:
<h2>Name: {{selected.name}}</h2>
etc...
See my example here: http://plnkr.co/edit/mUMZ0VGO8l1ufV1JJNQE?p=preview