I have created reusable directive something like dropdown but dropdown open in modal which is working good.
my directive looks like this
<p-select items="deptStations" header-text="Select " text="Select departure..." text-icon="ion-chatbubble-working" text-field="City_Name_EN" text-field2="City_Code" value-field="City_Code" ng-model="deptStation.value">
</p-select>
<p-select items="arrStations" header-text="Select " text="Select arrival..." text-icon="ion-chatbubble-working" text-field="D.City_Name_EN" text-field2="D.City_Code" value-field="D.City_Code" ng-model="arrStation.value">
</p-select>
My directive html is
<ion-content>
<div class="list">
<label ng-repeat="item in items | filter:search" class="item item-text-wrap" ng-click='validateSingle(item)'>
{{item[textField]}} {{textField2 !== '' ? " (" + item[textField2] + ")" : ""}}
</label>
</div>
</ion-content>
Now my issue is when JSON is 1 level it will work as below
[{City_Name_EN:'Abu Dhabi', City_Code:'AUH' },
{City_Name_EN:'Alexandria',City_Code:'HBE' }]
But if I have 2 level JSON than it will not work
[{D:{City_Code:'AMM',City_Name_EN:'Amman'},
D:{City_Code:'BKK',City_Name_EN:'Bangkok'}}]
So how can make this part dynamic {{item[textField]}}
My plunkr http://plnkr.co/edit/GxM78QRwSjTrsX1SCxF7?p=preview
With this kind of dynamic expression of yours, it is always better to have directive consider only a specific contract provided as view model. If the directive consumer has a different data format it should be upto that component to provide the contract that directive needs, it can just map the data to the view model that directive expects. This way you can keep things clean, that would be my opinion.
Now to work around your issue you would need to do a trick to evaluate the multilevel property against an object. You can use $scope.$eval to evaluate any dynamic expression against the scope object. example you can evaluate a dynamic property evaluation of prop1.prop2.prop3 on a scope property item by doing $scope.$eval("prop1.prop2.prop3", item) or $scope.$eval("item." + "prop1.prop2.prop3")
So in your directive:
Added a scope function to get the item text and value:
$scope.getItemName = function(field, item){
//here "this" represents the current child scope of ng-repeat
return $scope.$eval(field, item);
//return this.$eval("item." + field);
}
and
$scope.validateSingle = function(item) {
$scope.text = $scope.$eval($scope.textField, item) + ($scope.textField2 !== '' ? " (" + $scope.$eval($scope.textField2, item) + ")" : "");
$scope.value = $scope.$eval($scope.valueField, item);
...
Update your template to get respective text:
<label ng-repeat="item in items | filter:search" class="item item-text-wrap" ng-click='validateSingle(item)'>
{{getItemName(textField, item)}} {{textField2 !== '' ? " (" + getItemName(textField2, item) + ")" : ""}}
</label>
Plnkr
Related
I'm wondering is there any way to add dynamically generated names in nested ng-repeat, for example:
<div ng-repeat="x in JSONfile">
<div ng-repeat="i in x.name">
<span><a ng-href="{{i.link}}">{{i.name}}</a></span>
</div>
</div>
JSONfile: returns some names,
x.name is dynamically generated from the mentioned JSONfile, and it should be used as a plain text like "NAME", if I add NAME instead of i.name I get the json file loaded, but i want it automatically loaded, because I don't know which of the names will come first.
the i.name returns this:
n
a
m
e
not "NAME" as it should..
So, the question is, is there any way to tell angular that i want this dynamically generated value to be looked as I typed it?
PS.
x.name loads a JSON file with some info about a person.
If i type ng-repeat="i in Tom" it will return the json, but with x.name it doesn't work.
Thanks!
EDIT (added json):
var brojVijesti = [ ];
$scope.JSONfile = brojVijesti;
// LNG Json
$http.get("/LEADERBOARDv2/jsons/LNG.php").then(function(response) {
var LNG = response.data.LNG;
$scope.LNG = LNG;
$scope.LNGbroj = LNG.length;
brojVijesti.push({"name":"LNG", "number":LNG.length});
});
// DT JSON
$http.get("/LEADERBOARDv2/jsons/DT.php").then(function (response) {
var DT = response.data.DT;
$scope.DT = DT;
$scope.DTbroj = DT.length;
brojVijesti.push({"name": "DT", "number": DT.length});
});
I believe you want i in x not i in x.name
Edit: You can then use the $parse dependency which will grab the variable of that specific name from $scope.
<div ng-repeat="x in JSONfile">
<div ng-repeat="i in x">
<span><a ng-href="{{i.link}}">{{getVariable(i.name)}}</a></span>
</div>
</div>
JS:
$scope.getVariable = function(variableName) {
//evaluate the variable name in scope's context.
return $parse(variableName)($scope);
}
I'm trying to use a filter on my ng-repeat that is a function that has a parameter passed in, however the filter doesn't seem to work.
This is the filter function that i am using. It compares 2 arrays to see what matches in each then should return true or false.
$scope.ifinfav1 = function(f){
return e.indexOf(f) !== -1;
};
This is my HTML where the filter is being used.
<ion-view view-title="Favourites">
<ion-content>
<ion-list>
<ion-item id="fav" class="item-icon-right" collection-repeat="office in offices|filter:ifinfav1(office.id)" ng-controller="ModalCtrl" ng-click="openModal(office.id); lastview(office.id);">
<p>{{office.id}}</p>
<p id="details">{{office.LocAddressLine1 + ", " + office.LocAddressLine2 + ", " + office.LocCity + ", " + office.LocCountryDescription + ", " + office.LocZipPostalCode}}</p>
<i ng-class="{'icon ion-android-star': liked(office.id), 'icon ion-android-star-outline': liked(office.id)}" ng-click="togglefav(office.id); $event.stopPropagation();"></i>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
You can not choose what arguments are passed to the function you use as a predicate to your filter.
That is, you can not do:
<p ng-repeat="office in offices | filter:isInFavourites(offices.id)">
You can only specify the function itself, not the arguments that are gonna be passed to it when invoked. Thus, only the following is valid:
<p ng-repeat="office in offices | filter:isInFavourites">
As specified in AngularJS's documentation for filter (link):
The function is called for each element of the array, with the element, its index, and the entire array itself as arguments.
What's interesting here for you is the element itself, the first argument your function is being passed. You simply have to update it to work with your office objects instead of their ids.
For example:
$scope.ifinfav1 = function(office){
return e.indexOf(office.id) !== -1;
};
... would do wonders!
Here's a link to a working JSFiddle illustrating my suggestion with sample data.
I am developing a web-application using Angular Js.
I want to fill a div, into my html view, using the ng-repeat directive. The array used by ng-repeat has some duplicates, but in my view I want to display item only once (if an element has already been shown, its copies must be graphically hidden). How can I do this?
<div ng-repeat="item in selectedProcedures track by $index">
<span>{{item.id}}</span>
</div>
Just use a unique filter like this:
<div ng-repeat="item in selectedProcedures track by $index | unique : 'id'">
<span>{{item.id}}</span>
</div>
Then create the unique filter:
app.filter('unique', function() {
return function(collection, property) {
var output = [];
angular.forEach(collection, function(item) {
//check if it exists in output on the basis of property, if not then add to output
output.push(item);
})
return output;
}
})
'property' in the function is 'id' in the example whereas collection refers to the entire array.
I would recommend you not to hide generated Html, but to add a filter to delete duplicates :
<div ng-repeat="item in selectedProcedures track by $index | deleteDuplicates">
. . .
</div>
angular.module('myApp').filter('deleteDuplicates', function(){
return function filterCore(source)
{
var out = [];
// . . .
return(out);
};
});
Here is the AngularJS custom filter tutorial.
I have a working plunker where you select a thing from a dropdown and it displays data. I would like to be able to click one of those items and it to fill another list below. with other data. I know of ng-click and thats what I am using currently to just pop up an alert with the data I want to be in the list.
This is the section in question:
<div>
<select ng-options="post as post.id for post in allPosts" ng-model="selectPost" ng-change="select()">
<option value="">--select--</option>
</select>
<input type="text" ng-model="searchText" ng-change="search()" />
<ul>
<li data-ng-repeat="item in records | orderBy:'email':reverse" ng-click="moreInfo(item)">
{{item.email}}
</li>
</ul>
</div>
Ideally I want a list like what is in the popup something like:
Email: 'email...'
Name: 'name...'
Body: 'body...'
Like what is in the popup, but to show up below the list of things displayed from choosing the dropdown. (on my webpage it will be over to the right so I am not concerned about formatting, just how to do it). But I DO NOT want the the list to show up if I don't click on an option.
Plunker here.
edit: I am beginning to think maybe an ng-show will do the trick in some fashion, yet, I still do not know how I would pass the data down to the list.
Create a div that will be visible when a message variable is available.
<div ng-show="message">
{{ message }}
</div>
and in your controller, assign the contents for the moreInfo to a $scope.message:
$scope.moreInfo = function(id) {
$scope.message = "Email: " + id.email + "\nName: " + id.name + "\nBody: " + id.body;
};
Here's an updated plunker.
I edited your plunker , hope that is what you wanted.. and it's better for you to use controller as syntax article and you should looki into styleguide too i like this one by John Papa styleguide
It's actually quite straightforward:
First, set your new text to a scope value on click:
$scope.moreInfo = function(id) {
$scope.curResults = "Email: " + id.email + "\nName: " + id.name + "\nBody: " + id.body
//alert("Email: " + id.email + "\nName: " + id.name + "\nBody: " + id.body);
};
Then, simply assign this value to another div:
<div ng-show="curResults">{{curResults}}</div>
Then, whenever you click on the results, curResults is updated and shown in that div.
ng-show="curResults" makes sure the div is only shown when there's a value set to curResults.
Having searched extensively, got some help from A ternary in templates and getting partially functional results, I'm 99% sure I'm doing it 99% right, but...obviously not completely, so I'm here.
The basic HTML structure:
<ul>
<li class="week-row" ng-repeat="week in weeks" id="{{$index}}">
<ul class="tiles" ng-class="{ 'expanded': week.isOpen, 'hidden': !week.isOpen }">
<li class="day-tile"
ng-class="{'active': (activeDay == $parent.$index + '-' + $index) }"
id="{{$parent.$index + '-' + $index}}"
ng-repeat="day in week.days"
ng-click="fn2({ week: $parent.$index, day: $index })">
<!-- moved ng-class to here, and it works? -->
<div>some stuff in here</div>
</li>
</ul>
</li>
</ul>
The stuff in the controller that sits above it:
$scope.activeDay = null;
$scope.fn1 = function() { $scope.activeDay = '0-0'; }; // this works, and sets the first one active
$scope.fn2 = function(data) { $scope.activeDay = data.week + '-' + data.day; }; // this sets the first one not active, but none of the others go active
I'm trying to set one of the nested list items to be active, based on its indexes in the nested arrays by using the $parent.$index and $index as a string, joined by '-'.
What's throwing me off is that console.logging $scope.activeDay, data.week + '-' + data.day, and both == and === comparisons come out exactly as I would expect, (the same strings, true, true) and it works on initial load when I set activeDay to '0-0', so I'm clearly missing something in my binding or...?
After finding this: https://egghead.io/lessons/angularjs-the-dot - I tried setting it up as an object so I couldn't get into some weird isolate scope nonsense: $scope.tiles = { activeDay: null }; and then setting that property from my functions, to no avail.
Why does setting it initially work, while changing it later does not? Is this improper binding of classes or...?
I also tried it with
class="day-tile {{activeDay == $parent.$index + '-' + $index ? 'active' : ''}}"
and that works initially, but breaks afterwards...
Your help is much appreciated!
UPDATE:
After moving ng-class="{'active': (activeDay == $parent.$index + '-' + $index) }" onto the div inside the ng-repeated .day-tile li, it works fine.
Any ideas why this might be?
From the info you provided I have this working jsFiddle.
I removed the classes you were hard coding to true and stuck them in class="". The classes you were evaluating expressions for i put in ng-class="".
I attached your functions to $scope so ng-click could find them. So $scope.fn2 rather than var fn2.
Without knowing more details, I would say this should fix your problem.
Code Changes:
controller:
$scope.activeDay = null;
$scope.fn1 = function() { $scope.activeDay = '0-0'; };
$scope.fn2 = function(data) { $scope.activeDay = data.week + '-' + data.day; };
partial:
<ul class="tiles" ng-class="{'expanded' : week.isOpen, 'hidden' : !week.isOpen}">
<li class="day-title"
ng-class="{'active': (activeDay == $parent.$index + '-' + $index)}"
id="{{$parent.$index + '-' + $index}}"
ng-repeat="day in week.days"
ng-click="fn2({ week: $parent.$index, day: $index })">
//put expression here so you can see the list item
{{week.day}}
</li>
</ul>