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>
Related
Within angular I have a filtered list of people that takes the filter criteria from a predicate function. I want to watch a variable of the filtered list (called filteredPeople) every time the filtered list changes. But I am unable to see when that variable changes.
My code is below:
HTML:
<ul>
<li ng-repeat="person in ($ctrl.filteredPeople = ($ctrl.people | filter: $ctrl.filter))">
...
</li>
</ul>
JS:
controller: ['$scope',
function ($scope) {
var $ctrl = this;
$ctrl.people = {...}
$ctrl.filteredPeople = [];
$scope.$watch($ctrl.filteredPeople, function () {
console.log("called"); //not being called
});
$ctrl.filter = function (p) {
//custom filter function for each item in the array of people
}
}]
I can answer any questions of provide more code if needed
angular.module('app', []).controller('ctrl', function($scope) {
var vm = this;
vm.items = [
{ name: 'Sam' },
{ name: 'Max' },
{ name: 'Tom' },
{ name: 'Henry' },
{ name: 'Jack' },
{ name: 'Kate' }
]
var counter = 1;
$scope.$watchCollection('vm.filtered', function(){
console.log('Changed' + counter++);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<div ng-app='app' ng-controller='ctrl as vm'>
<input type='text' ng-model='vm.filter' />
<ul>
<li ng-repeat='item in vm.filtered = (vm.items | filter : vm.filter)'>{{item}}</li>
</ul>
</div>
I have a ng-repeat directive and I want to show different object values in fixed index positions.
data:
{
"recipe": {
"id":"0001",
"name":"soup",
"cat":[{"name":"dinner"}, {"name":"lunch"}, {"name":"breakfast"}]
}
I want it to show like..
ng-repeat:
1: (show cat.name: "breakfast") should only be shown at index 0
2: (dont show items that contains "breakfast", "dinner")
3: (dont show items that contains "breakfast") (show cat.name:
"dinner") - only show "dinner" at possition index 3
4: (dont show items that contains "breakfast", "dinner")
5: (dont show items that contains "breakfast", "dinner")
etc..
How should I manage this?
orderBy filter will achieve this but you need to help it.
I would give each cat item a displayOrder since it needs something.
Then just
<ul>
<li ng-repeat="x in data.recipe.cat | orderBy:orderMeals">
{{x.name}}
</li>
</ul>
With a controller doing something like
var app = angular.module('myapp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.data = {
"recipe": {
"id": "0001",
"name": "soup",
"cat": [{
"name": "dinner", displayOrder: 2
}, {
"name": "lunch", displayOrder: 1
}, {
"name": "breakfast", displayOrder: 0
}]
}};
$scope.orderMeals = function(item) {
console.log('item', item);
return item.displayOrder;
}
});
Notice I added displayOrders into your recipe object (see here)
try this
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', function($scope) {
$scope.json = {
"recipe": {
"id":"0001",
"name":"soup",
"cat":[{"name":"dinner"}, {"name":"lunch"}, {"name":"breakfast"}]
}
};
$scope.json.recipe.cat.reverse();
}]);
.html
<body ng-app='myApp' ng-controller='myCtrl'>
<div ng-repeat ="t in json.recipe.cat" ng-if="t.name != 'breakfast' && t.name != 'dinner'">
here : {{t.name}}
</div>
see the plunker Code here
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
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;
});
I have the code like this:
<form ng-controller="MyCtrl" ng-submit="save()>
<div ng-repeat="f in fields">
<label for="theInput">{{ f.label }}</label>
<select ng-model="f.value" ng-init="f.value = f.id" ng-options="item.id as item.name for item in f.items"></select>
</div>
</form>
<script>
var Mod = angular.module('myApp', []);
function MyCtrl($scope, $http) {
var categories = [];
$http.get(BASE_URL + 'task/listCategory').success(function(data) {
categories = data;
});
$scope.fields = [
{ label: 'Category', value: 'items', items: categories }
];
}
</script>
why angular select doesnot working like charm?
thanks for your help
you might want to do
var Mod = angular.module('myApp', []);
function MyCtrl($scope, $http) {
var categories = [];
$http.get(BASE_URL + 'task/listCategory').success(function(data) {
categories = data;
$scope.fields = [{ label: 'Category', value: 'items', items: categories }];
});
}