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>
Related
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..
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'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>
I have an array of restaurant objects and I want to list them by grouping their cities
My object is like;
restaurant = {
id: 'id',
name: 'name',
city: 'city'
}
This HTML Markup can give some info about what I want to do.
<div ng-repeat="restaurant in restaurant | filter: ???">
<div class="header">
<h1 ng-bind="restaurant.city"></h1>
<a>Select All</a>
</div>
<div class="clearfix" ng-repeat="???">
<input type="checkbox" id="restaurant.id" />
<label ng-bind="restaurant.name"></label>
</div>
</div>
Can I do it with one single array or do i need to create seperate city and restaurant arrays to do it?
If you want to group restaurants by city, you can use groupBy of angular.filter module.
Just add the JS file from here: http://www.cdnjs.com/libraries/angular-filter to your project and use following code.
var myApp = angular.module('myApp',['angular.filter']);
function MyCtrl($scope) {
$scope.restaurants = [
{id: 1, name: 'RestA', city: 'CityA'},
{id: 2, name: 'RestB', city: 'CityA'},
{id: 3, name: 'RestC', city: 'CityC'},
{id: 4, name: 'RestD', city: 'CityD'}
];
}
<div ng-controller="MyCtrl">
<ul ng-repeat="(key, value) in restaurants | groupBy: 'city'">
<b>{{ key }}</b>
<li ng-repeat="restaurant in value">
<i>restaurant: {{ restaurant.name }} </i>
</li>
</ul>
</div>
I've created JSFiddle for you with working example.
I have a following data structure coming from REST:
scope.taglist =
[ { name: "mylist", tags: ["tag1", "tag2", "tag3", ...]}, { name:
"mylist2", tags: ["tag2.1", "tag2.2", "tag2.3", ...]} ]
In order to present the names of the objects I have the following html:
<div>
<select ng-model="tagNameSelection">
<option ng-repeat="tagObj in taglist" value="{{tagObj}}">{{tagObj.name}}</option>
</select>
</div>
<div class="tagdetails">
<!-- present the list of tags from tagNameSelection -->
</div>
Now I am a little bit of a loss on how to present the tags list of
individual object. I am able to present the array in raw format (by
sticking {{tagNameSelection}} inside the tagdetails div) but when I
try to iterate through those with ng-repeat angular gives a error
message.
Oddly enough when I hard-code one of the tag lists to the scope in controller the ng-repeat works flawlessly.
Maybe you interesting something like this:
HTML
<div ng-controller="fessCntrl">
<div>
<select ng-model="tagNameSelection"
ng-options="tagObj as tagObj.name for tagObj in taglist"
ng-change="change(tagNameSelection)"></select>
</div>
<pre>{{tagNameSelection.tags|json}}</pre>
<div class="tagdetails">
<ul ng-repeat="tag in tagNameSelection.tags">
<li>{{tag}}</li>
</ul>
</div>
</div>
Controller
var fessmodule = angular.module('myModule', []);
fessmodule.controller('fessCntrl', function ($scope) {
$scope.change = function (value) {
};
$scope.taglist = [{
name: "mylist",
tags: ["tag1", "tag2", "tag3"]
}, {
name: "mylist2",
tags: ["tag2.1", "tag2.2", "tag2.3"]
}]
});
fessmodule.$inject = ['$scope'];
See Fiddle