i have function to remove item in multiple array angularjs. i use a factory like bellow
app.factory("array_obj", function () {
var currentUserIDs = {};
currentUserIDs.data = [];
currentUserIDs.city = [];
return currentUserIDs;
});
in controller have a function like this
$scope.deleteItem = function (index) {
currentUserIDs.city.splice(index, 1);
setUserID(); //insert data in url realtime
}
this work just for one array like city
i need a function to delete any item in array_obj
function simpleController($scope) {
$scope.data = {
"results1": [ { "id": 1, "name": "Test" }, { "id": 2, "name": "Beispiel" }, { "id": 3, "name": "Sample" } ] ,
"results2": [ { "id": 1, "name": "Test2" }, { "id": 2, "name": "Beispiel2" }, { "id": 3, "name": "Sample2" } ]
}
;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app>
<body ng-controller="simpleController">
<div data-ng-repeat="results in data">
<div data-ng-repeat="result in results">>
{{result.name}}</br>
</div>
</div>
</body>
</html>
Have Fun..!!!
In your controller:
$scope.all_results = data.results1.concat(data.results2);
In your view
<whatever ng-repeat="item in all_results">{{ item.id }} - {{ item.name }}</whatever>
You could work with an extra <div> with ng-repeat attribute in your HTML where in my example results is your data.
<div>
<div ng-repeat="result in results">
<div ng-repeat="item in result">{{item.name}}</div>
</div>
</div>
ok this work ... i have function to remove item in multiple array angularjs. i use a factory like bellow
app.factory("array_obj", function () {
var currentUserIDs = {};
currentUserIDs.data = [];
currentUserIDs.city = [];
return currentUserIDs;
});
in controller have a function like this
$scope.deleteItem = function (index) {
currentUserIDs.city.splice(index, 1);
setUserID(); //insert data in url realtime
}
this work just for one array like city
i need a function to delete any item in array_obj
Related
I'm using an ng-repeat where each object (item) is as below:
{
"properties":
[
{"value":"started","key":"status"},
{"value":"somename","key":"name"},
{"value":"10","key":"age"},
]
}
How do I get the value corresponding to key 'status'
I have tried:
<span class="badge">{{item.properties['value'] | filter:{item:{properties:{key:'status'}}}}}</span>
but no luck.
Thanks,
Rohith
What you want to filter is item.properties, not item.properties['value']. This will check each property and return an array of items that match your criteria. Since there will only be one match (I assume), you want to grab the resulting array[0] and then look at the .value. You do this by wrapping your filter in parentheses, and then accessing it just like a normal array of objects.
var app = angular.module("myApp", [])
.controller("myCtrl", function () {
this.items =[{
"properties":
[
{"value":"started","key":"status"},
{"value":"somename","key":"name"},
{"value":"10","key":"age"},
]
},{
"properties":
[
{"value":"finished","key":"status"},
{"value":"somename","key":"name"},
{"value":"15","key":"age"},
]
},{
"properties":
[
{"value":"error","key":"status"},
{"value":"somename","key":"name"},
{"value":"12","key":"age"},
]
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl as Main">
<div ng-repeat="item in Main.items">
<div>{{ (item.properties | filter:{'key': 'status'})[0].value }}</div>
</div>
</body>
Edit
To implement your own custom filter with nested property searching, you can do something like the following:
Not all of the conditions for partial matching are in there, but it should be enough to get a good idea of how it works.
var app = angular.module("myApp", [])
.filter("propertyFilter", function () {
return function (items, property, value, strict) {
return items.filter(function (item) {
var propertyChain = property.split(".");
var _propToCheck = item;
// step through nested properties
for(var prop of propertyChain) {
if (_propToCheck.hasOwnProperty(prop)) {
_propToCheck = _propToCheck[prop];
}
else {
// return false if property does not exist
return false;
}
}
if (strict) {
// exact matches only
return _propToCheck === value;
}
else {
// partial matching -- incomplete, but enough to show an example
if (typeof _propToCheck === "string"){
return _propToCheck.toLowerCase().indexOf(value.toLowerCase()) > -1;
}
else if (_propToCheck instanceof Array) {
return _propTocheck.some(function (elem) {
return _propToCheck.toLowerCase().indexOf(value.toLowerCase()) > -1;
})
}
else {
return _propToCheck == value;
}
}
});
}
})
.controller("myCtrl", function () {
this.items =[{
"properties":
[
{"value":"started","key":{"internalKey": {"_internalInternalKey": 'status'}}},
{"value":"somename","key":"name"},
{"value":"10","key":"age"},
]
},{
"properties":
[
{"value":"finished","key":{"internalKey": "status"}},
{"value":"somename","key":"name"},
{"value":"15","key":"age"},
]
},{
"properties":
[
{"value":"error","key":"status"},
{"value":"somename","key":"name"},
{"value":"12","key":"age"},
]
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl as Main">
<div ng-repeat="item in Main.items" style="margin: 10px;">
<div>key: {{ (item.properties | propertyFilter:'key':'status')[0].value }}</div>
<div>key.internalKey: {{ (item.properties | propertyFilter:'key.internalKey':'status')[0].value }}</div>
<div>key.internalKey._internalInternalKey: {{ (item.properties | propertyFilter:'key.internalKey._internalInternalKey':'status')[0].value }}</div>
</div>
</body>
onhstrong text:
When i click checkbox table id based column name shown in the right side using json data
JS
var app = angular.module('plunker', ['ui']);
app.controller('MyCtrl', function($scope) {
$scope.records = [ { "Id": 1 }, { "Id": 2 }, { "Id": 3 } ];
$scope.selected = {};
$scope.ShowSelected = function() {
$scope.records = $.grep($scope.records, function( record ) {
return $scope.selected[ record.Id ];
});
};
});
HTML
<div data-ng-controller="MyCtrl">
<ul>
<li data-ng-repeat="record in records">
<input type="checkbox" ng-model="selected[record.Id]"> {{record.Id}}
</li>
</ul>
Show Selected
</div>
I have flattening data in my firebase with the following code. But when I want display favorite user posts list with ng-repeat, the template gets repeated a second time and comes out totally blank. How can I correct this?
"Post": {
"xKkdfjjfld856i": {
"name": "My first post",
"author": "Miguel"
},
"xKkdfjj556FGHh": { ... },
"xK499DF6FlHjih": { ... }
},
"users": {
"John": {
favorited_posts {
"xKkdfjjfld856i": true,
"xKkdfjj556FGHh": true
}
},
"Mia": { ... },
"Patrick": { ... }
},
HTML:
<div ng-repeat="post in favoritedPosts track by $index">
<div class="card post-card">
<h1>{{post.name}}</h1>
<p>{{post.author}}</p>
</div>
</div>
Controller :
var userRef = new Firebase("https://myApp.firebaseio.com/users")
var userFavoriteRef = userRef.child($scope.user_id).child("favorited_posts")
var favoritedPosts = $firebaseArray(userFavoriteRef)
userFavoriteRef.once("value", function(snapshot) {
snapshot.forEach(function(childSnapshot) {
var key = childSnapshot.key();
var postRef = new Firebase("https://myApp.firebaseio.com/Posts")
postRef.child(childSnapshot.ref().key()).once('value', function(postSnapshot) {
console.log("Look",postSnapshot.val());
$scope.favoritedPosts = postSnapshot.val();
});
});
});
Try working with the $firebaseArray and $getRecord (documentation) to get the object value based on the object key. Then you will have everything you need without looping over assync calls.
Controller
var userRef = new Firebase("https://myApp.firebaseio.com/users")
var userFavoriteRef = userRef.child($scope.user_id).child("favorited_posts")
$scope.favoritedPosts = $firebaseArray(userFavoriteRef)
var postRef = new Firebase("https://myApp.firebaseio.com/Posts")
$scope.posts = $firebaseArray(postRef)
HTML
<div ng-repeat="post in favoritedPosts">
<div class="card post-card">
<h1>{{posts.$getRecord(post.$id).name}}</h1>
<p>{{posts.$getRecord(post.$id).author}}</p>
</div>
</div>
I'd like to retrieve specific data within a JSON file within an ng-repeat loop, My code is as follows thus far, and it works correctly bringing in the correct low resolution url of the image. I want to display the first comment corresponding to this image from a specific user below it in the <p> tag, ie I want the the first "text" value always from the username "tellasaur". Not sure how to bring that in, could I have some help? thanks!
NG-REPEAT LOOP
<li ng-repeat="p in pics">
<img ng-src="{{p.images.low_resolution.url}}" />
<p></p>
</li>
CONTROLLER
app.controller('ShowImages', function($scope, InstagramAPI){
$scope.layout = 'grid';
$scope.data = {};
$scope.pics = [];
InstagramAPI.fetchPhotos(function(data){
$scope.pics = data;
console.log(data)
});
});
JSON
"images":{
"low_resolution":{
"url":"https:\/\/scontent.cdninstagram.com\/hphotos-xaf1\/t51.2885-15\/s320x320\/e15\/11243658_841091872640638_1858051687_n.jpg",
"width":320,
"height":320
},
},
"comments":{
"count":38,
"data":[
{
"created_time":"1436314585",
"text":"Living on a lake #amarie4107",
"from":{
"username":"tellasaur",
"profile_picture":"https:\/\/igcdn-photos-b-a.akamaihd.net\/hphotos-ak-xfp1\/t51.2885-19\/11142181_1606991566225969_1204610350_a.jpg",
"id":"174270894",
"full_name":"kristella"
},
"id":"1024203434844916571"
},
{
"created_time":"1436317671",
"text":"Wow",
"from":{
"username":"sbcarol2002",
"profile_picture":"https:\/\/igcdn-photos-b-a.akamaihd.net\/hphotos-ak-xfp1\/t51.2885-19\/10707061_359756607505353_826681437_a.jpg",
"id":"1280059782",
"full_name":"Susan Long"
},
"id":"1024229322726738700"
},
{
"created_time":"1436320519",
"text":"\ud83d\udc93 dreamyy",
"from":{
"username":"veekster",
"profile_picture":"https:\/\/igcdn-photos-h-a.akamaihd.net\/hphotos-ak-xtf1\/t51.2885-19\/11117059_1743047859255223_204225114_a.jpg",
"id":"31179150",
"full_name":"Victoria Wright"
},
"id":"1024253210688915485"
}
]
}
Here's one way to do it using a filter.
angular.module('app',[])
.filter('getFirstCommentFrom',function(){
return function(arr, user){
for(var i=0;i<arr.length;i++)
{
if(arr[i].from.username==user)
return arr[i].text;
}
return '';
}
})
.controller('TestCtrl', function($scope){
$scope.pics = [
{ "images":{
"low_resolution":{
"url":"https:\/\/scontent.cdninstagram.com\/hphotos-xaf1\/t51.2885-15\/s320x320\/e15\/11243658_841091872640638_1858051687_n.jpg",
"width":320,
"height":320
},
},
"comments":{
"count":38,
"data":[
{
"created_time":"1436314585",
"text":"Living on a lake #amarie4107",
"from":{
"username":"tellasaur",
"profile_picture":"https:\/\/igcdn-photos-b-a.akamaihd.net\/hphotos-ak-xfp1\/t51.2885-19\/11142181_1606991566225969_1204610350_a.jpg",
"id":"174270894",
"full_name":"kristella"
},
"id":"1024203434844916571"
},
{
"created_time":"1436317671",
"text":"Wow",
"from":{
"username":"sbcarol2002",
"profile_picture":"https:\/\/igcdn-photos-b-a.akamaihd.net\/hphotos-ak-xfp1\/t51.2885-19\/10707061_359756607505353_826681437_a.jpg",
"id":"1280059782",
"full_name":"Susan Long"
},
"id":"1024229322726738700"
},
{
"created_time":"1436320519",
"text":"\ud83d\udc93 dreamyy",
"from":{
"username":"veekster",
"profile_picture":"https:\/\/igcdn-photos-h-a.akamaihd.net\/hphotos-ak-xtf1\/t51.2885-19\/11117059_1743047859255223_204225114_a.jpg",
"id":"31179150",
"full_name":"Victoria Wright"
},
"id":"1024253210688915485"
}
]
}
}
]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="app" ng-controller="TestCtrl">
<li ng-repeat="p in pics">
<img ng-src="{{p.images.low_resolution.url}}" />
{{p.comments.data|getFirstCommentFrom:'tellasaur'}}
<p></p>
</li>
</div>
I have a multi check box application which requires me to have multiple filters. I have been unable to use multiple filters even if I try to hard code an array to filter on. Here is an example I have created to try to make this work.
Working Example
HTML MARKUP:
<body ng-app="app">
<div ng-controller="MainCtrl">
<div ng-repeat="item in data.sessions | IndustryFilter : data.sessions.industry ">
{{item.id}}
</div>
</div>
Javascript
var app = angular.module("app", [])
.controller("MainCtrl", function ($scope, MatchedFilterList) {
$scope.data = {"sessions": [{
"id": "a093000000Vhzg7AAB",
"industry": ["Automovtive"],
"sessionName": "Keynote",
},
{
"id": "a093000000zg7AAB",
"industry": ["Automovtive", "Retail"],
"sessionName": "Keynote2",
},
{
"id": "a093er000f00zg7AAB",
"industry": ["Automovtive", "Retail", "Consumer Goods"],
"sessionName": "Keynote3",
}
]};
}).filter("IndustryFilter", function (MatchedFilterList) {
return function () {
var filtered = [];
angular.forEach(MatchedFilterList.industry, function (item) {
filtered.push(item);
});
console.log("Filter: Filter " + filtered)
return filtered;
};
})
.factory("MatchedFilterList", function(){
var matchedFilterList = {};
matchedFilterList.industry = {
"Automotive": "Automotive",
"Retail" : "Retail"
};
return matchedFilterList;
});