I am fetching some records which are already assigned to users with checked checkboxes. I want to assign some additional ones that are coming as unchecked checkboxes. How can I show checked checkboxes first and then show whatever is unchecked after them?
You can use angular filters to show checked checkboxes first and whatever is unchecked, show it after them
try this:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.data = [
{id: 1, value: 1},
{id: 2, value: 0},
{id: 3, value: 1},
{id: 4, value: 0},
{id: 5, value: 0}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<h2>Checked</h2>
<div ng-repeat="item in data | filter : { value : 1}">
{{item.id}} : <input type="checkbox" ng-checked="item.value=='1'"/>
</div>
<h2>Unchecked</h2>
<div ng-repeat="item in data | filter : { value : 0}">
{{item.id}} : <input type="checkbox" ng-checked="item.value=='1'"/>
</div>
</div>
</div>
Hope it helps..
Related
How can i set true or false when my certain data is selected in angularjs?
example i have data
$scope.obj = {
'id': 1,
'id': 2,
'id': 3
}
<div ng-repeat="myData in ctrl.obj">
<input type="text" class="form-control" placeholder="Notes" ng-model="ctrl.myData ">
</div>
i want some help when i input data and that is equal to id = 1 it will set my value that is ID 1 else it will set empty, but when i go back to my last selected input box it will still display the value of my input box that is previously inputted. thanks to assist on my logic error :)
Check the below code which may help you:
var abcAPP = angular.module("abcApp",[]);
abcAPP.controller("abcCtrl",function($scope){
$scope.obj = [{ 'id': 1}, {'id': 2}, {'id': 3 }]
$scope.myData = ["1","2","3"];
});
<!DOCTYPE html>
<html ng-app="abcApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-controller="abcCtrl">
<pre ng-bind="myData|json"></pre>
<div ng-repeat="myData1 in obj">
<input id="{{$index}}" type="text" class="form-control" placeholder="Notes" ng-model="myData[$index]">
</div>
</div>
</body>
</html>
I am trying to create a filter where I can conditionally select multiple attributes of the same variable. For example
var list = [ {id: 1, state: 'U'}, {id: 2, state: 'P'} ]
<div ng-repeat="item in list| filter:{state:'U'}>
This would result in id 1 only being displayed.
<div ng-repeat="item in list| filter:{state:'P'}>
This would result in id 2 only being displayed.
How can I create a filter to display all id's that have state:'P' OR state:'A'
Neither of the below work:
<div ng-repeat="item in list| filter:{state:'P' || 'A'}>
<div ng-repeat="item in list| filter:({state:'P'} || {state:'A'})>
Hope this below code snippet might help you ! Run it :)
var app = angular.module('app', []);
app.controller('Ctrl', function($scope) {
$scope.list = [{
id: 1,
state: 'U'
}, {
id: 2,
state: 'P'
}, {
id: 3,
state: 'A'
}];
$scope.state = function(item) {
return (item.state == 'P' || item.state == 'A');
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
<div ng-repeat="item in list | filter:state">
{{item.id}}
</div>
</div>
Why do have so much confusion. Use ng-if just like your normal if statement like this
var list = [ {id: 1, state: 'U'}, {id: 2, state: 'P'},{id: 1, state: 'A'} ]
<div ng-repeat="item in list">
<div ng-if="item.state == 'A' || item.state== 'P'">
{{item.id}}
</div>
</div>
Implementation is also as below
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.list = [{id: 1,state: 'U'}, {id: 2,state: 'P'}, {id: 3, state: 'A'}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="item in list">
<div ng-if="item.state == 'A' || item.state== 'P'">
{{item.id}}
</div>
</div>
</div>
I am using Kendo TabStrip angular version. My tabs create dynamically based on data and same its contents. It works fine for first time. But whenever I change content dynamically tabstrip dont work.
Please find following plunker link
http://plnkr.co/edit/x6rAN1YLzDZBuVcM39KA?p=preview
var app = angular.module('MyApp', ['kendo.directives']);
app.controller('ngTabStripTestController', function ($scope) {
$scope.myArray = ["one", "two"];
$scope.myGridArray = ["one", "two"];
$scope.updateContent = function () {
$scope.myGridArray = ["one2", "two2"]
}
});
<div ng-controller="ngTabStripTestController">
<div kendo-tab-strip="tabstrip" k-ng-delay="tabGridData" id="tabpan">
<ul>
<li ng-repeat="myElement in myArray">
Tab {{myElement}}
</li>
</ul>
<div ng-repeat="i in myGridArray">
Contents {{i}}
</div>
<br />
</div>
<div data-kendo-button
data-k-on-click="updateContent()">Update Content</div>
You need use 'track by' and create a 'id' for the AngularJS do Bind
See the example: http://plnkr.co/edit/0UUzIEzFhU7fX6Yuzasc?p=preview
$scope.myArray = [{id: 1, description: "one"}, {id: 2, description: "two"}];
$scope.myGridArray = [{id: 1, description: "one"}, {id: 2, description: "two"}];
$scope.updateContent = function () {
$scope.myGridArray = [{id: 1, description: "one2"}, {id: 2, description: "two2"}];
}
<div ng-controller="ngTabStripTestController">
<div kendo-tab-strip="tabstrip" k-ng-delay="tabGridData" id="tabpan">
<ul>
<li ng-repeat="myElement in myArray track by myElement.id">
Tab {{myElement.description}}
</li>
</ul>
<div ng-repeat="i in myGridArray track by i.id">
Contents {{i.description}}
</div>
<br />
</div>
<div data-kendo-button
data-k-on-click="updateContent()">Update Content</div>
</div>
I'm retrieving 2 JSON arrays from a remote source. I'm trying to filter the results from array X to array Y and only return the unique values from both. All of the questions on stackoverflow are for filtering 1 array not a set of multiple.
You can use something similar to unique filter from the a8m/angular-filter
(function() {
angular.module('myApp', ['angular.filter'])
.controller('HomeController', ['$scope',
function($scope) {
$scope.first = [{id: 1, name:'first'},{id: 2, name:'second'},
{id: 3, name:'third'}, {id: 4, name: 'fourth'} ];
$scope.second = [{id: 1, name:'first'},{id: 2, name:'second'},
{id: 5, name: 'fifth'} ];
}
]);
}());
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.1/angular-filter.min.js"></script>
<div ng-app="myApp">
<div ng-controller="HomeController">
<ul>
<li ng-repeat="item in first.concat(second) | unique:'id'">
{{item.id}} : {{ item.name }}
</li>
</ul>
</div>
</div>
Please look at http://jsfiddle.net/mahbub/sbNty/4/
<div ng-app="">
<div ng-controller="Ctrl">
<ul>
<li ng:repeat="status in statuses"><label><input type="checkbox" data-ng-model="status.type" data-ng-true-value="closed" data-ng-false-value="{{status.type}}" />{{status.type}}</label></li>
</ul>
</div>
</div>
As you can see the label of the checkboxes are printed based on the status type from the JSON. Now on unchecking, the label becomes false. I must be missing some correct way to get back to the originial label text upon unchecking the checkbox.
I mean when I uncheck, the label needs to be "open" or whatever it was initially.
Any help is greatly appreciated.
Thanks
Finally i did it using ngInit and setting a different variable within the scope object. See the demonstration here http://jsfiddle.net/mahbub/sbNty/5/
<div ng-app="">
<div ng-controller="Ctrl">
<ul>
<li ng:repeat="status in statuses"><label><input ng-init="status.oldStat=status.type" type="checkbox" ng-model="value" ng-click="selectV(value,this)">{{status.type}}</label></li>
</ul>
</div>
</div>
Controller :
'use strict';
function Ctrl($scope) {
$scope.statuses = [{
id: 1,
type: 'open'},
{
id: 2,
type: 'open'},
{
id: 3,
type: 'new'},
{
id: 4,
type: 'closed'},
{
id: 5,
type: 'open'},
{
id: 6,
type: 'new'},
{
id: 7,
type: 'open'}
];
$scope.selectV = function(val, stat) {
if (val) {
stat.status.type = "closed";
} else {
stat.status.type = stat.status.oldStat;
}
}
}