We Keep Coding

How to display the contents of bootstrap modal tabs?

I am a very beginner to AngularJS,I have a bootstarp modal with 2 tabs I have made it to display only one tab at a time.In the modal I have two buttons NEXT and PREVIOUS I am able to switch between the tabs through these buttons.But the issue is the content in their respective tabs wont change when I change the tab.Where am I going wrong.Kindly help me.
<div class="modal-body">
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab1" data-toggle="tab">
<div>{{current.data}}</div>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<textarea class="form-control" ng-model="first" name="first" required></textarea>
<md-button class="md-raised md-primary" ng-click="next()">next</md-button>
<md-button class="md-warn md-raised" ng-click="previous()">previous</md-button>
</div>
<div class="tab-pane" id="tab2">
<textarea class="form-control" ng-model="second" name="second" required></textarea>
<md-button class="md-raised md-primary" ng-click="next()">next</md-button>
<md-button class="md-warn md-raised" ng-click="previous()">previous</md-button>
</div>
</div>
</div>
Controller.js
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.dataSet = [
{ data: "First", index: 0 },
{ data: "Second", index: 1 }
],
$scope.current = $scope.dataSet[0],
$scope.next = function() {
var i = $scope.getIndex($scope.current.index, 1);
$scope.current = $scope.dataSet[i];
},
$scope.previous = function() {
var i = $scope.getIndex($scope.current.index, -1);
$scope.current = $scope.dataSet[i];
},
$scope.getIndex = function(currentIndex, shift) {
var len = $scope.dataSet.length;
return (((currentIndex + shift) + len) % len)
}
});

I have updated your code with the ng-class attribute for your selected data kindly refer https://jsfiddle.net/jasonantho/fwowg8q5/

ms-card not working with data

I'm trying to put the data in the template but its not working, I can receive the data in HTML with vm.maquinas and maquina but i cant send it to TEMPLATE via ng-model.
Didn't find much info about ms-cards
Module
angular
.module('app.tabelas.entidades.recursos.painel', [])
.config(config);
/** #ngInject */
function config($stateProvider,$translatePartialLoaderProvider, msApiProvider, msNavigationServiceProvider)
{
$stateProvider.state('app.painel-recursos', {
url : '/entidades/recursos/painel',
views: {
'content#app': {
templateUrl: 'app/main/tabelas/entidades/recursosEntidades/views/painelRecursos/painelRecursos.html',
controller : 'maquinasController as vm'
}
},
resolve : {
MaquinasData: function (msApi)
{
return msApi.resolve('maquinas.lista#get');
}
},
bodyClass: 'painel-recurso'
});
// Translation
$translatePartialLoaderProvider.addPart('app/main/tabelas/entidades/recursosEntidades/views/painelRecursos');
// Api
msApiProvider.register('maquinas.lista', ['app/data/tables/maquinas.json']);
msNavigationServiceProvider.saveItem('tabelas.entidades.recursos', {
title: 'Recursos',
icon : 'icon-account',
weight: 2
});
msNavigationServiceProvider.saveItem('tabelas.entidades.recursos.painel', {
title: 'Painel de Maquinas',
icon : 'icon-account-multiple',
state: 'app.painel-recursos',
weight: 2
});
}
Controller
angular
.module('app.tabelas.entidades.recursos.painel')
.controller('maquinasController', maquinasController);
/** #ngInject */
function maquinasController(MaquinasData)
{
var vm = this;
// Data
vm.maquinas = angular.copy(MaquinasData.data);
// Methods
//////////
}
HTML
<div id="price-tables" class="page-layout simple fullwidth doc-page">
<div class="header md-accent-bg" layout="row" layout-align="space-between">
<div layout="column" layout-align="center start">
<div class="title"><label translate="MACHINE.TITLE_MACHINE">Title</label></div>
</div>
</div>
<div class="content">
<div class="price-tables" flex layout="row" layout-wrap>
<div class="price-table style-1 md-whiteframe-2dp" layout="column" ng-repeat="maquina in vm.maquinas">
<ms-card template="'app/main/modulos/planeamento/directives/cardMaquinas/templateMaquinas.html'" ng-model="vm.maquinas"></ms-card>
</div>
</div>
</div>
</div>
Template
<div class="package-type md-primary-bg" layout="column" layout-align="space-between center" style="background-color:{{maquina.color}};" >
<span class="md-display-1">{{card.name}}</span>
<span class="md-subhead">{{vm.card.name}}</span>
</div>
<div class="price" layout="row">
<div layout="column" class="column-padding">
<div class="md-title" translate="MACHINE.MARKING"> Marcação </div>
<div class="period">{{maquina.marcacao}}</div>
</div>
<div layout="column" class="column-padding">
<div class="md-title" translate="MACHINE.PARTS"> Peças </div>
<div class="period">{{maquina.pecas}}</div>
</div>
<div layout="column" class="column-padding">
<div class="md-title" translate="MACHINE.MATERIAL"> Material </div>
<div class="period">{{maquina.material}}</div>
</div>
</div>
<md-divider></md-divider>
<div layout="row">
<div class="terms" layout="column">
<div class="term"><span class="text-bold" translate="MACHINE.NEXT"> Proxima marcação: </span> </div>
<div class="term"><span class="text-bold" ></span> {{maquina.proximaMarcacaoEmpresa1}}</div>
<div class="term"><span class="text-bold"></span> {{maquina.proximaMarcacaoEmpresa2}} </div>
</div>
<div class="terms" payout="column">
<div class="term"><span class="text-bold" translate="MACHINE.DATE"> Data e hora:</span> </div>
<div class="term"><span class="text-bold"></span>{{maquina.dataUm}}</div>
<div class="term"><span class="text-bold"></span>{{maquina.dataDois}}</div>
</div>
</div>

Finally, i found out the problem.
It is required to use 'card' on the template. You cant change 'card' to another name(i think).
Consider the following object:
vm.cardModel = {
title : 'My Card',
description: 'My card description'
}
It will be available in the template file as:
card = {
title : 'My Card',
description: 'My card description'
}
Font: http://fuse-angular-material.withinpixels.com/components/custom-directives/ms-card

AngularJs filter not updating

I am trying to make a nice angularJS grid with boxes and a filter on the top where you pick which types you want. I have not been able to figure out why it doesn't work for me, I tried this and it worked but I wasn't able to apply it to my code.
Anyway, please read through it and help
var ts = [{area:"area1", model:"500", color:"black", colspan: 3,rowspan: 3}, {area:"area2", model:"500", color:"red", colspan: 3,rowspan: 3}];
var filtered= [];
var areas = []
for (var i = 0; i < ts.length; i++) {
if (!areas.includes(ts[i].area)){
areas.push(ts[i].area);
}}
angular
.module('Application', ['ngMaterial'])
.controller('gridController', gridController)
function gridController ($scope) {
$scope.filterAreas = { area:"area1" };
$scope.dataDifferenceArray = [];
$scope.areas= areas;
$scope.filt = function(){
console.log("gg");
$scope.filterAreas = { area:"area2" };
};
$scope.colorTiles =ts
and HTML:
<div id="filterController" ng-controller="gridController as ctrl" style="max-height=500px" ng-cloak>
<div id="filters" ng-repeat="x in areas" ng-class="{'selected': clicked}" ng-click="clicked = !clicked;filt();">{{x}}</div>
</div>
<div id="gridContainer" ng-controller="gridController as ctrl" ng-cloak>
<md-content layout-padding style="clear: both;">
<md-grid-list
md-cols-gt-md="9" md-cols-sm="1" md-cols-md="6"
md-row-height-gt-md="1:1" md-row-height="4:3"
md-gutter-gt-md="16px" md-gutter-gt-sm="8px" md-gutter="4px">
<md-grid-tile
ng-class="{'flipped': clicked}" ng-click="clicked = !clicked"
ng-repeat="tile in colorTiles | filter:filterAreas"
md-colspan-gt-sm="{{tile.colspan}}"
md-rowspan-gt-sm="{{tile.rowspan}}">
<div id="f1_card" class="shadow">
<div class="front face" style="background-color: tile.color !important;" ng-style="{
'background': tile.color
}">
<div >
<a>
some stuff
</a>
</div>
</div>
<div class="back face center" style="background-color: tile.color !important;" ng-style="{
'background': tile.color
}">
<div style= "position: relative;">
<a >
some stuff
</a>
</div>
</div>
</div>
</md-grid-tile>
</md-grid-list>
</md-content>
</div>
`
Thank you!

Use AngularJS $http.get to repeatedly request JSON array on scrolling

Below is a snippet using AngularJS to get the JSON response.
On scrolling to the bottom of the page, I need to request repeatedly till the JSON array list is empty.
<section>
<div style="padding-top:60px" infinite-scroll="myPagingFunction()" infinite-scroll-distance="3" ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="news in newsList">
<div class="col-lg-3 col-md-4 col-sm-6" style="">
<div class="thumbnail">
<img src="{{news.coverUrl}}" class="img-responsive" alt="{{news.name}}"/>
<div class="caption">
<h4>{{news.name}}</h4>
</div>
</div>
</div>
<div class="visible-lg clearfix" ng-if="($index+1)%4 == 0"></div>
<div class="visible-md clearfix" ng-if="($index+1)%3 == 0"></div>
<div class="visible-sm clearfix" ng-if="($index+1)%2 == 0"></div>
</div>
</div>
</section>
<script src="js/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="js/ng-infinite-scroll.min.js"></script>
<script>
var offset = 0
var maxCount = 20
var app = angular.module('myApp', ['infinite-scroll']);
function myPagingFunction(){
app.controller('myCtrl', function($scope, $http) {
$http.get("news.json").then(function(response) {
$scope.newsList = response.data;
});
});
}
myPagingFunction();
</script>
<script src="js/bootstrap.min.js"></script>
Kindly help me in solving this.

Using jQuery + angular is not good
You must use angular way instead, and write some directives or listeners in run phase, but here's a better approach - use `ngInfiniteScroll plugin

You can simply use infinite Scroll services to easily achieve this ,
<ANY infinite-scroll='{expression}'
[infinite-scroll-distance='{number}']
[infinite-scroll-disabled='{boolean}']
[infinite-scroll-immediate-check='{boolean}']
[infinite-scroll-listen-for-event='{string}']>
Add ng-infinite scroll module in your application
for more info refer this [Documentation]:(https://sroze.github.io/ngInfiniteScroll)

You can use this simple directive and enjoy:
app.directive("scroll",['$window', function ($window) {
return function (scope, element, attrs) {
angular.element($window).bind("scroll", function () {
if (document.body.scrollHeight - $window.scrollY < 890) {
scope.$apply(function () {
scope.myPagingFunction();
});
}
});
};
}]);
and you can use this code for your situation
<section>
<div style="padding-top:60px" scroll ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="news in newsList">
<div class="col-lg-3 col-md-4 col-sm-6" style="">
<div class="thumbnail">
<img src="{{news.coverUrl}}" class="img-responsive" alt="{{news.name}}"/>
<div class="caption">
<h4>{{news.name}}</h4>
</div>
</div>
</div>
<div class="visible-lg clearfix" ng-if="($index+1)%4 == 0"></div>
<div class="visible-md clearfix" ng-if="($index+1)%3 == 0"></div>
<div class="visible-sm clearfix" ng-if="($index+1)%2 == 0"></div>
</div>
</div>
</section>
<script src="js/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="js/ng-infinite-scroll.min.js"></script>
<script>
var offset = 0
var maxCount = 20
var app = angular.module('myApp', ['infinite-scroll']);
app.controller('myCtrl', function ($scope, $http) {
$scope.myPagingFunction= function() {
$http.get("news.json").then(function (response) {
$scope.newsList = response.data;
});
}
});
app.directive("scroll",['$window', function ($window) {
return function (scope, element, attrs) {
angular.element($window).bind("scroll", function () {
if (document.body.scrollHeight - $window.scrollY < 890) {
scope.$apply(function () {
scope.myPagingFunction();
});
}
});
};
}]);
</script>
<script src="js/bootstrap.min.js"></script>

Filtering and Sorting in Ionic Service Factory

sorry for newbie question. I want to add filtering and sorting by name to my page. When i try using this code it is still work when i am using list of items from variable in controller scope but after i am using factory in services.js, there is two problem:
When i am typing the search word in search box, filter is work and only show the filtered item but i can't clear the filter again (when i am deleting the search word with backspace the item is still filtered)
The order by doesn't work anymore for sorting the items
Here is the code :
(HTML)
<ion-view view-title="Foods">
<ion-content class="padding">
<div class="bar bar-header item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="foodSearch.search">
</label>
</div>
<button class="button button-block button-energized" ng-click="showOrderOptions()">
Order by
</button>
<div class="list ">
<a class="item" href="#" ng-hide="isOrderOptionsHide" ng-click="reverse=!reverse;order('name',reverse)">
Name
</a>
<a class="item" href="#" ng-hide="isOrderOptionsHide" ng-click="reverse=!reverse;order('rating',reverse)">
Rating
</a>
</div>
<ion-list>
<ion-item class="list card" ng-repeat="food in foods = (foods | filter: filterFood)"
href="#/tab/foods/{{food.id}}">
<div class="item item-head">
<h2 style="text-align:center;"><b>{{food.name}}</b></h2>
<div class="row">
<div class="col item item-image" style="width:100px;height:100px;">
<img class="" src="{{food.imageSrc}}" >
</div>
<div class="col item item-image">
<h2>{{food.title}}</h2>
<div class="row">
<img src="img/smile.jpg" style="width:100%; height:100%; margin-top: -10px;"class="col col-40">
<h3 class="col col-60" >{{food.rating}}</h3>
</div>
</div>
</div>
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
(Controller.js):
.controller('FoodsCtrl', function($scope,Foods,$filter) {
$scope.foods = Foods.all();
$scope.remove = function(food) {
Foods.remove(food);
};
$scope.foodSearch = {search: ''};
$scope.filterFood = function (item){
return item.title.toLowerCase().indexOf($scope.foodSearch.search.toLowerCase()) >= 0
|| item.name.toLowerCase().indexOf($scope.foodSearch.search.toLowerCase()) >= 0;
}
$scope.isOrderOptionsHide = true;
$scope.reverse=true;
$scope.showOrderOptions = function (){
$scope.isOrderOptionsHide = !$scope.isOrderOptionsHide;
}
var orderBy = $filter('orderBy');
$scope.order = function(predicate, reverse) {
$scope.foods = orderBy($scope.foods, predicate, reverse);
$scope.isOrderOptionsHide = true;
};
})

Just do this way ng-repeat="food in foods | filter: foodSearch.search | orderBy: 'name'" You do not have to do this :
$scope.filterFood = function (item){
return item.title.toLowerCase().indexOf($scope.foodSearch.search.toLowerCase())..
angular filter automaticaly does that.