AngularJS - Change the scope of a directive - javascript

I'm trying to set up an Angular Directive so that I can re-use a piece of HTML. I have managed to achieve this, but the problem I am facing is when I want to pass some value into that templated HTML, from the containing HTML.
For simplicity's sake, I will use an example of a customer that has multiple addresses (in this context, the customer is an object and each address instance is another object attached to the customer).
Example of the data:
var customer = {
forename: "John",
surname: "Smith",
address1: {
street: "123 Street",
town: "Georgeville",
},
address2: {
street: "67 Maple Grove",
town: "SomeTown"
}
};
Here is an example of my directive setup:
var module = angular.module(...);
module.directive("address", function () {
return {
restrict: 'A',
templateUrl: '/AddressView.html'
};
});
And my attempted usage:
<div ng-model="customer">
<div address></div>
<div address></div>
</div>
And this is what I would like to do to be able to pass the customer's addresses across to the templated HTML:
<div ng-model="customer">
<div address ng-model="customer.address1"></div>
<div address ng-model="customer.address2"></div>
</div>
I may have misunderstood the purpose of directives, or this may not be possible, but if anyone has any suggestions they would be greatly appreciated.
Let me know if you need me to add any further information.
Edit
Here is a Plunker that I have set up to try to illustrate what I am trying to achieve.

you need to isolate the scope for your directive so that things don't get confused for angular.
And your object is better structure this way:
var customer = {
forename: "John",
surname: "Smith",
addresses: [
address1: {
street: "123 Street",
town: "Georgeville",
},
address2: {
street: "67 Maple Grove",
town: "SomeTown"
}
]
};
this way you can do this:
<div class="customer">
<div address ng-repeat="address in customer.addresses">
{{address.town}} {{address.street}}
</div>
</div>
I don't know why you'r using ng-model here?!
This is an example, but if you provide a plunker with an example code helping you will be easier.
Update:
First your ng-controller was in the wrong place you need to move it up so the address directive could be in the scope of the controller so it could access the address object.
Second you have 2 undefined variables: street and town.
And you need to isolate the scope so each directive don't mess with the variables of the other one.
Here's a working plunker.
Hope this help.

Related

I am unable to parse the json array using angular ng-repeat

Below is the JSON which I am getting and I am storing that in variable using,
JS:-
$scope.shopData = resp.data.shopVal;
On the JSP page its not working in ng-repeat tag.
JSON:-
{
"subCategoryNames": null,
"subCategorymMap": {},
"shopVal": [
{
"shopAdrs": "tex10",
"shopSrvc": "tex12",
"shopName": "tex13",
"shopWbst": "tex14"
},
{
"shopAdrs": "tex15",
"shopSrvc": "tex16",
"shopName": "tex16",
"shopWbst": "tex17"
},
{
"shopAdrs": "tex18",
"shopSrvc": "tex19",
"shopName": "tex20",
"shopWbst": "tex21"
}
],
"ownerVal": {
"ownrNumbr": "1111111111",
"ownrFName": "ABCD",
"ownrLName": "EFGH",
"ownrEmail": "ABXD305#GMAIL.COM"
}
}
JSP:-
<div data-ng-repeat="shop in shopDta">
<a>
{{shopDta.shopName}}<br>
Address: {{shopDta.shopAdrs}}<br>
Services: {{shopDta.shopSrvc}}<br>
Website: {{shopDta.shopWbst}}<br><br>
</a>
</div>
Note that $scope.shopData is correctly getting value as per JSON. Please help
Try this one, you are trying to iterate an Object using ng-repeat which is not possible, you need to get the array and put it inside ng-repeat, i have done some changes, hope this works out for you.
<div data-ng-repeat="shop in shopData.shopVal">
<a>
{{shop.shopName}}<br>
Address: {{shop.shopAdrs}}<br>
Services: {{shop.shopSrvc}}<br>
Website: {{sho[.shopWbst}}<br><br>
</a>
</div>
It should be like this :
<div data-ng-repeat="shop in shopData">
<a>
{{shop.shopName}}<br>
Address: {{shop.shopAdrs}}<br>
Services: {{shop.shopSrvc}}<br>
Website: {{shop.shopWbst}}<br><br>
</a>
</div>
try this, you are trying to iterate an Object using ng-repeat which is not possible, you need to get the array and put it inside ng-repeat, i have done some changes, hope this works out for you.
<div data-ng-repeat="shop in shopData">
<a>
{{shop.shopName}}<br>
Address: {{shop.shopAdrs}}<br>
Services: {{shop.shopSrvc}}<br>
Website: {{shop.shopWbst}}<br><br>
</a>
</div>

Angular ng-repeat search for two fields of an object

Say i have the following array
$scope.myArr = [{
name: 'Marc Rasmussen',
phone: 239470192,
title: 'It Dude',
description: 'Hello my name is Marc i am testing the fact that i can search for two fields in an object'
}, {
name: 'Louise',
phone: 1234567890,
title: 'HR Director',
description: 'I am also testing'
}, {
name: 'Leonardo',
phone: 123499,
title: 'Actor',
description: 'I have never won an oscar'
}];
Now as you can see i have the following fields:
name
phone
title
description
Now i repeat these using ng-repeat
<div ng-repeat="obj in myArr">
<div>
name: {{obj.name}}
</div>
<div>
phone: {{obj.phone}}
</div>
<div>
title: {{obj.title}}
</div>
<div>
description: {{obj.description}}
</div>
</div>
Now what i want is that i want a single textfield to search for results in both the name and description and no other field
Normally you would care a variable such as $scope.search.$ but this would search in all fields. alternativly you could make an input field for each field however this does not forfill what i wish to accomplish.
So my question is how can you make 1 input search for two fields at the same time?
here is a fiddle of the above code:
Fiddle
I believe this article might help you out:
Filtering by Multiple Specific Model Properties in AngularJS (in OR relationship)
Essentially taking advantage of angular's filter and using a predicate function on each item in the repeated array.

Angularjs: how load model in lazy mode

I want to load some data in lazy mode.
In particular, suppose I have an object like this one:
$scope.person = {
name: 'Stefano',
surname: 'Rossi',
address: 'Orange Road',
city: {
clazz: 'foo.bar.City',
id: 5,
lazy: true
}
}
With angular I can bind the first three properties to an html tag without problem.
<input ng-model="person.name">
<input ng-model="person.surname">
<input ng-model="person.address">
And it works well.
But suppose that I want to add a decode of city, I would be possible interact ngBinding or ngModel for test if the object is lazy, so with a promise get the real value (I think get by $http service )
I try extend ngmodel but not have the correct $scope...
https://jsfiddle.net/qq4gqn6t/13/
Anybody knows how to interact with ngmodel o ngbinding?
Thanks in advance
Due to two-way data binding models could be lazy loaded once mounted on the view.
Here is a rough example loading the model upon an event giving you the ability to make any additional changes.
$scope.loadlater = function() {
$scope.person = {
name: 'Stefano',
surname: 'Rossi',
address: 'Orange Road',
city: {
clazz: 'foo.bar.City',
id: 5,
lazy: true
}
}
}
https://jsfiddle.net/qq4gqn6t/14/

AngularJS $http reading JSON data

How can i display data from an array of JSON data returned from the server in AngularJS? This is what i have, and for some reason i cannot display any data on my html page:
<script>
function placesCtrl($scope, $http) {
$http.get("http://somedomain/api/places_JSON.php")
.success(function(response){
$scope.names = response;
});
$scope.display = $scope.names[2].City;
}
</script>
The JSON data that the $http.get is returning looks something like this:
[{City: "Berlin", Country: "Germany"},
{City: "Portland", Country: "USA"},
{City: "Barcelona", Country: "Spain"},
{City: "Paris", Country: "France"},
{City: "Cowes", Country: "UK"}]
Then the HTML code looks something like this:
<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-controller="placesCtrl">
<p> {{display}}</p>
</div>
So instead of displaying "Barcelona" as the result, it just displays {{display}}.
Any suggestions would be much appreciated.
Your problem is that the success callback is called after you set the scope variable. Move the variable assignment inside your callback function, and you should be fine.
Also, as ryeballar points out, it's highly recommended that you as you register an application in the ng-app directive. See the tutorial for details. Although you don't need it for a simple example like this, it will make your life much, much easier as you add more components.
You have to register your Controller. Try this:
var myApp = angular.module('myApp',[]);
myApp.controller('placesCtrl', ['$http','$scope', function($http, $scope) {
$http.get("http://somedomain/api/places_JSON.php")
.success(function(response){
$scope.names = response;
});
$scope.display = $scope.names[2].City;
}]);
And edit your html:
<div ng-app="myApp" ng-controller="placesCtrl">

AngularJS: why empty model fields are removed from object?

In my application I have a model attached to a form which is something like that:
$scope.location = { description: "my descriptive description", address: "blah" }
Cleaning the field "description" in the form, which is bound to ng-model="location.description", removes the field from $scope.location which becomes:
$scope.location = { address: "blah" }
Now I would like it to retain the "description" field. What can I do in order to achieve
this behaviour?
Thanks for your help
One possibility is using the ng-change directive:
<input ng-model="desc" ng-change="setDescription()">
And in your controller:
$scope.setDescription = function(){
$scope.location.description = $scope.desc ? $scope.desc: "default"
}
Building off of Kozlowski's comment: http://jsfiddle.net/myMyQ/2/

Categories