I need filter for ng-repeat, which will hide elements.
If $scope.selected will get true, i need to hide elements when select: true or visible: false
$scope.selected = false;
$scope.array = [
{name: 'item1', select: true, visible: false},
{name: 'item2', select: true, visible: true},
{name: 'item3', select: false, visible: true},
{name: 'item4', select: true, visible: false},
{name: 'item5', select: false, visible: true},
]
<div ng-repeat="item in array">
<div>{{item.name}}</div>
</div>
In this case you need use filter.
Live example in jsfiddle.
var myApp = angular.module("myApp", []);
myApp.controller("myCtrl", function($scope) {
$scope.selected = true;
$scope.myFilter = function(item){
return $scope.selected && (!item.visible || item.select)
}
$scope.array = [
{name: 'item1', select: true, visible: false},
{name: 'item2', select: true, visible: true},
{name: 'item3', select: false, visible: true},
{name: 'item4', select: true, visible: false},
{name: 'item5', select: false, visible: true},
]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="item in array|filter:myFilter">
<div>{{item.name}}</div>
</div>
</body>
Try this
<div ng-repeat="item in arrray">
<div ng-show="selected">
<div ng-hide="item.visible==false && item.select==true">{{item.name}}</div>
</div>
</div>
use ng-if:
<div ng-if="item.visible && selected && item.select == true">{{item.name}}</div>
I would recommend this one:
<div ng-repeat="item in array">
<div ng-hide="selected && (!item.visible || item.select)">{{item.name}}</div>
</div>
Related
I wanna disable the button with the checkbox in nested angularjs ng-repeat. I mean to Disable button in the current array of ng-repeat. My code looks like the below example,
angular.module('test', [])
.controller('myController', ['$scope', function($scope) {
$scope.hasSelectedAnItem = false;
$scope.mainItems = [
{ dropdownlist: [
{OptionValue: 123, OptionName: "Adam", IsSelected: true},
{OptionValue: 234, OptionName: "Paul", IsSelected: false},
{OptionValue: 345, OptionName: "Jason", IsSelected: true},
{OptionValue: 464, OptionName: "Joe", IsSelected: false}
]},
{ dropdownlist: [
{OptionValue: 923, OptionName: "Adam2", IsSelected: true},
{OptionValue: 934, OptionName: "Paul2", IsSelected: false},
{OptionValue: 945, OptionName: "Jason2", IsSelected: true},
{OptionValue: 964, OptionName: "Joe2", IsSelected: false}
]}
];
$scope.canBeSaved = function(item) {
alert(item);
var found = false;
$scope.mainItems.forEach(function(item) {
if (item.IsSelected) {
found = true;
}
});
$scope.hasSelectedAnItem = found;
}
$scope.save = function() {
alert($scope.cat.IsSelected);
}
$scope.canBeSaved();
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.1/angular.min.js"></script>
<div ng-app="test" ng-controller="myController">
<div ng-repeat="items in mainItems">
<button ng-click="save()" ng-disabled="!hasSelectedAnItem" class="btn btn-sm btn-block btn-primary">
Save
</button>
<ul class="categories-list">
<li ng-repeat="cat in items.dropdownlist">
<label><input type="checkbox" id="cat-{{cat.OptionValue}}" ng-model="cat.IsSelected" ng-change="canBeSaved(cat.OptionValue)"/> {{cat.OptionName}}</label>
</li>
</ul>
</div>
</div>
Need your help.
Working example with code https://jsfiddle.net/malikzahid321/nc63hz90/24/ Thank you
Easiest just to use ng-model (which you are) which updates the data array everytime you check/uncheck. Then you can put a function in your ng-disabled, pass along the items collection and test for a any 'true' values with Array#some. No need for the ng-check function you had.
... ng-disabled="checkList(items)" ...
and in your controller
$scope.checkList = function(items) {
return !items.some(a => a.IsSelected)
}
angular.module('test', [])
.controller('myController', ['$scope', function($scope) {
$scope.hasSelectedAnItem = false;
$scope.mainItems = {
itemss: [
{OptionValue: 123, OptionName: "Adam", IsSelected: true},
{OptionValue: 234, OptionName: "Paul", IsSelected: false},
{OptionValue: 345, OptionName: "Jason", IsSelected: true},
{OptionValue: 464, OptionName: "Joe", IsSelected: false}
],
items: [
{OptionValue: 923, OptionName: "Adam2", IsSelected: true},
{OptionValue: 934, OptionName: "Paul2", IsSelected: false},
{OptionValue: 945, OptionName: "Jason2", IsSelected: true},
{OptionValue: 964, OptionName: "Joe2", IsSelected: false}
]
};
$scope.checkList = function(items) {
return !items.some(a => a.IsSelected)
}
$scope.save = function() {
alert($scope.cat.IsSelected);
}
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.1/angular.min.js"></script>
<div ng-app="test" ng-controller="myController">
<div ng-repeat="items in mainItems">
<button ng-click="save()" ng-disabled="checkList(items)" class="btn btn-sm btn-block btn-primary">
Save
</button>
<ul class="categories-list">
<li ng-repeat="cat in items">
<label><input type="checkbox" id="cat-{{cat.OptionValue}}" ng-model="cat.IsSelected"/> {{cat.OptionName}}</label>
</li>
</ul>
</div>
</div>
With bootstrap-vue: 2.1 I implemented tables with big number of columns andwant to make scrolling of
columns, but failed with page like :
<template>
<b-card >
<b-card-body class="">
<b-card-title class="mb-2">
<h4>You can control users in system</h4>
</b-card-title>
<div>
<b-table
responsive="true"
stacked="false"
:items="users"
:fields="usersFields"
:per-page="0"
:current-page="current_page"
>
<template v-slot:cell(id)="data">
<div class="text-right">{{ data.value }}</div>
</template>
<template v-slot:cell(name)="data">
<div class="text-left admin_table_cell">{{ data.value }}</div>
</template>
<template v-slot:cell(status)="data">
<div class="text-left admin_table_cell">{{ getDictionaryLabel( data.value, userStatusLabels ) }}</div>
</template>
<template v-slot:cell(permission_text)="data">
<div class="text-left admin_table_cell">{{ data.value }}</div>
</template>
<template v-slot:cell(email)="data">
<div class="text-left admin_table_cell">{{ data.value }}</div>
</template>
<template v-slot:cell(actions)="data">
<div class="text-center admin_table_cell">
<router-link :to="{name: 'adminUserEditor', params: {id: data.item.id}}" :class="'p-1 a_edit_item_'+data.item.id">
<i :class="'i_link '+getHeaderIcon('edit')" title="Edit user"></i>
</router-link>
<a v-on:click="removeUser(data.item.id, data.item.name, index)" :class="'p-1 a_delete_item_'+data.id">
<i :class="'fa fa-trash'"></i>
</a>
</div>
</template>
</b-table>
</div>
<b-pagination
v-model="current_page"
:total-rows="users_total_count"
:per-page="per_page"
aria-controls="my-table"
></b-pagination>
</b-card-body>
</b-card>
</template>
<script>
import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)
import appMixin from '#/appMixin';
import {settingCredentialsConfig, settingsJsMomentDatetimeFormat, settingsUserStatusLabels} from '#/app.settings.js'
export default {
data() {
return {
users: [],
users_total_count: 0,
usersFields: [
'id',
{key: 'name', sortable: false},
{key: 'email', sortable: false},
{key: 'status', sortable: false},
{key: 'first_name', sortable: false},
{key: 'last_name', sortable: false},
{key: 'phone', sortable: false},
{key: 'website', sortable: false},
{key: 'permission_text', label: 'Permissions'},
'actions',
],
current_page: 1,
per_page: 2,
filter_name: '',
order_by: 'created_at',
order_direction: 'desc',
}
},
name: 'usersAdminListingPage',
mixins: [appMixin],
mounted() {
this.loadUsers()
}, // mounted() {
...
}
</script>
Setting property
responsive="true"
I expected hor scrolling automatically, but failed and I have all page design broken
and shifting at all left-right.
Which is valid way to make hor scrolling automatically ?
the props responsive and stacked are Boolean props (note they can also accept a string breakpoint names), and you are passing string "true" values to them (e.g. the string 'true').
So you should be doing:
<b-table :responsive="true" :stacked="false" ... >
<!-- ... --->
</b-table>
Or simply just the following:
<b-table responsive ... >
<!-- ... --->
</b-table>
Note stacked defaults to false if not specified.
i have multiple radio button groups
i need to set one of each group (maybe none) as selected
datasource
html Code
<div class='row' ng-show="mk.selectedTypeAttributesID.length != 0">
<div class='col-xs-6 col-sm-6 col-md-6 col-lg-6' ng-repeat="att in selectedTypeAttributesID">
<div class="switch-field">
<div class="switch-title">{{att.name}}</div>
<div>
<input ng-repeat-start="val in att.Values" class="bttn-input" type="radio" id="switch_{{val.val}}" name="switch_{{att.id}}" value="{{val.val}}" ng-click="mk.AttChange(att.id,val.val)" />
<label ng-repeat-end class="bttn-input" for="switch_{{val.val}}">{{val.val}}</label>
</div>
</div>
</div>
</div>
i need to use the value of 'Selected' On the datasource to set the checkbox
source Update
You need to use ng-model to select the radio button..
Where ng-model holds the selected value as shown below.
$scope.options = [{Selected: false, val: "red"}, {Selected: true, val:"Black"}, {Selected: false, val:"Pink"}];
$scope.selected = undefined;
var findResult = $scope.options.find(function(x){ return x.Selected == true });
if(findResult){
$scope.selected = findResult.val;
}
Here's a JSFiddle
Edit: Since the sources of the checkboxes are dynamic then build a dynamic selection tree for modal to bind to..
Here's an example:
$scope.options = [{ 0 : [{Selected: false, val: "red"}, {Selected: true, val:"Black"}, {Selected: false, val:"Pink"}]}, { 1 : [{ Selected: false, val: "2" }, { Selected: true, val: "1" }]}];
$scope.choices = [];
for(var i = 0; i < Object.keys($scope.options).length; i++){
var keys = Object.keys($scope.options);
$scope.choices.push({ Id: keys[i], Value: $scope.options[i][keys[i]].find(function(x){ return x.Selected == true }).val });
}
JSFiddle
Are you looking for a solution like so?
var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
$scope.selectedTypeAttributesID = [{
id: 1,
Values: [{
val: "red",
selected: ""
}, {
val: "green",
selected: ""
}, {
val: "blue",
selected: ""
}]
},
{
id: 2,
Values: [{
val: "1",
selected: ""
}, {
val: "2",
selected: ""
}, {
val: "3",
selected: ""
}]
}
];
$scope.setVal = function(att, index, val) {
for (var k of att.Values) {
k.selected = "";
}
att.Values[index].selected = val;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
<div class='row'>
<div class='col-xs-6 col-sm-6 col-md-6 col-lg-6' ng-repeat="att in selectedTypeAttributesID">
<div class="switch-field">
<div class="switch-title">{{att.name}}</div>
<div>
<input ng-repeat-start="val in att.Values" class="bttn-input" type="radio" id="switch_{{val.val}}" name="switch_{{att.id}}" ng-value="val.val" ng-click="setVal(att, $index, val.val)" />
<label ng-repeat-end class="bttn-input" for="switch_{{val.val}}">{{val.val}}</label>
</div>
</div>
</div>
</div>
<pre>{{selectedTypeAttributesID | json}}</pre>
</div>
var app = angular.module('test',[]);
app.controller('testController',function($scope){
$scope.users = [
{ 'name':'person1', 'sales': true, 'customer': false, 'vip': true },
{ 'name':'person2', 'sales': false, 'customer': true, 'vip': false },
{ 'name':'person3', 'sales': false, 'customer': true, 'vip': true },
{ 'name':'person4', 'sales': false, 'customer': false, 'vip': true },
{ 'name':'person5', 'sales': true, 'customer': true, 'vip': false },
{ 'name':'person6', 'sales': true, 'customer': false, 'vip': true },
];
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
</head>
<body>
<div ng-app='test' ng-controller="testController">
<h3>Groups</h3>
<input type='checkbox' ng-model="customer">Customer
<input type='checkbox' ng-model="sales">Sales
<input type='checkbox' ng-model="vip">VIP
<br>
<input type='text' ng-model="searchTerm">
<div>
<ul>
<li ng-repeat="user in users | filter:searchTerm"">
{{user.name}}
</li>
</ul>
</div>
</div>
</body>
</html>
Here is the Code i need to filter by the groups...By checking the checkbox i need to filter the exact value of the dataset...if i click multiple checkbox i need to filter the multiple data which has the value...
same time if i didn't checked any checkbox need to show the all data...
Please anyone help....
You can do something like this by creating a custom filter function. I don't like it the way it is solved.. I suspect if there's anything simpler possible.
var app = angular.module('test',[]);
app.controller('testController',function($scope){
$scope.users = [
{ 'name':'person1', 'sales': true, 'customer': false, 'vip': true },
{ 'name':'person2', 'sales': false, 'customer': true, 'vip': false },
{ 'name':'person3', 'sales': false, 'customer': true, 'vip': true },
{ 'name':'person4', 'sales': false, 'customer': false, 'vip': true },
{ 'name':'person5', 'sales': true, 'customer': true, 'vip': false },
{ 'name':'person6', 'sales': true, 'customer': false, 'vip': true },
];
$scope.myfilter = function(obj) {
var val = true;
if($scope.customer && !obj.customer ||
$scope.sales && !obj.sales ||
$scope.vip && !obj.vip
) {
val = false;
}
return val;
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
</head>
<body>
<div ng-app='test' ng-controller="testController">
<h3>Groups</h3>
<input type='checkbox' ng-model="customer">Customer
<input type='checkbox' ng-model="sales">Sales
<input type='checkbox' ng-model="vip">VIP
<br>
<input type='text' ng-model="searchTerm">
<div>
<ul>
<li ng-repeat="user in users | filter: myfilter | filter: searchTerm">
{{user.name}}
</li>
</ul>
</div>
</div>
</body>
</html>
You can create a custom filter and filter using this
<div ng-app='test' ng-controller="testController">
<h3>Groups</h3>
<input type='checkbox' ng-model="searchCriteria.customer">Customer
<input type='checkbox' ng-model="searchCriteria.sales">Sales
<input type='checkbox' ng-model="searchCriteria.vip">VIP
<br>
<input type='text' ng-model="searchCriteria.searchText">
<div>
<ul>
<li ng-repeat="user in users | searchTerm:searchCriteria">
{{user.name}}
</li>
</ul>
</div>
</div>
var app = angular.module('test',[]);
app.filter("searchTerm", function(){
return function(items, searchCriteria){
var filtered = [];
angular.forEach(items, function(item){
var searchText = searchCriteria.searchText;
var searchCustomer = searchCriteria.customer;
var searchSales = searchCriteria.sales;
var searchVip = searchCriteria.vip;
var matchesSearchText = searchText ? item.name.indexOf(searchText) !== -1 : true;
var customerMatch = searchCustomer ? item.customer : true;
var salesMatch = searchSales ? item.sales : true;
var vipMatch = searchVip ? item.vip : true;
if(matchesSearchText && customerMatch && salesMatch && vipMatch){
filtered.push(item);
}
});
return filtered;
};
});
app.controller('testController',function($scope){
$scope.users = [
{ 'name':'person1', 'sales': true, 'customer': false, 'vip': true },
{ 'name':'person2', 'sales': false, 'customer': true, 'vip': false },
{ 'name':'person3', 'sales': false, 'customer': true, 'vip': true },
{ 'name':'person4', 'sales': false, 'customer': false, 'vip': true },
{ 'name':'person5', 'sales': true, 'customer': true, 'vip': false },
{ 'name':'person6', 'sales': true, 'customer': false, 'vip': true },
];
$scope.searchCriteria = {
customer: false,
sales: false,
vip: false,
searchText: ''
};
});
Html code:
<div ng-controller="StoreController">
<div ng-repeat="store in gems">
{{store.name}}<br>
{{store.price}}
{{store.canPurchase}}
{{store.soldOut}}
<button ng-show="store.canPurchase">Add to Cart</button>
</div>
</div>
JS code:
myApp.controller('StoreController', ['$scope', function($scope){
$scope.gems=[
{name: 'Azurite', price: '110.50', canPurchase: 'false', soldOut: 'true'},
{name: 'Azurite +', price: '120.50', canPurchase: 'true', soldOut: 'false'}
];
}]);
I tried with ng-show="true" and ng-show="false", my code is working as expected.
I am printing store.canPurchase value on my html page and values are displayed correctly.
But when I give store.canPurchase in ng-show the code doesn't work.
remove the quotation marks and it will work fine. The false and true values of canPurchase are now strings ("") and not booleans.
$scope.gems=[
{name: 'Azurite', price: '110.50', canPurchase: false, soldOut: true},
{name: 'Azurite +', price: '120.50', canPurchase: true, soldOut: false}
];
Plunkr
The same goes for soldOut btw :)