We Keep Coding

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

Md-tabs AngularJS working once only

I am new at using angularjs and I've been encountering some issues on md-tabs. The next button is working but when I click again on the first tab the next button is not working anymore. Can you please take a look on my codes and tell me what's wrong. Thanks!
VIEW
<div class="row">
<div class="col-md-12" ng-class="{ 'blur' : vm.preloader.action }">
<md-tabs md-dynamic-height md-border-bottom md-selected="selectedIndex">
<md-tab label="Campaign Details">
<md-content class="md-padding">
<div class="md-content">
<div class="row" style="margin-top: 3%;">
<div class="col-md-6">
Content 1
</div>
</div>
<br>
<div class="row">
<div class="col-md-3">
<button class="btn btn-primary btn-lg" style="border-radius: 0; padding-right: 50px; padding-left: 50px; width: 100%;" ng-click="nextTab()">NEXT</button>
</div>
</div>
</div>
</md-content>
</md-tab>
<md-tab label="Recipients">
<md-content class="md-padding">
<div class="md-content">
<div class="row">
Content 2
</div>
<div class="row">
<div class="col-md-3">
<button class="btn btn-primary btn-lg" ng-click="nextTab()" style="width: 100%;">NEXT</button>
</div>
</div>
</div>
</md-content>
</md-tab>
<md-tab label="Confirm">
<md-content class="md-padding" ng-show="show_send_to_all">
<div class="md-content">
<div class="row" style="margin-top: 3%;">
Content 3
</div>
<div class="row">
<div class="col-md-3">
<button class="btn btn-primary btn-lg" ng-click="" style="width: 100%;">SEND</button>
</div>
</div>
</div>
</md-content>
</md-tab>
</md-tabs>
</div>
CONTROLLER:
(function(){
'use strict';
angular
.module('app')
.controller('SmsManagementController', SmsManagementController);
SmsManagementController.$inject = ['$rootScope', 'PreloaderService', 'ToastService', '$mdDialog', 'CaptchaService', '$localStorage', 'StaffRole', 'API'];
function SmsManagementController($rootScope, PreloaderService, ToastService, $mdDialog, CaptchaService, $localStorage, StaffRole, API) {
var vm = this;
// Variables
vm.totalrecord = { general: 0 };
vm.publicKey = API.captchakey;
vm.displayCaptcha = !($.inArray($localStorage.currentUser.role, StaffRole) > -1);
vm.preloader = {
general: true
};
// Initialization
Initialize();
// Public functions
function Initialize(){
PreloaderService.Display();
PreloaderService.Hide();
}
//Tabs
$rootScope.max = 2;
$rootScope.selectedIndex = 0;
$rootScope.nextTab = function() {
var index = ($rootScope.selectedIndex == $rootScope.max) ? 0 : $rootScope.selectedIndex + 1;
$rootScope.selectedIndex = index;
};
}
})();
Or maybe you can suggest a code on how will I convert this on jquery or javascript in order for me to have a next buttons for the tabs. I'm using a material design tabs of angularjs.

Your NEXT button is not working because in your next() method you are doing iterations on $rootscope, do those iterations on $scope..
$scope.max = 2;
$scope.selectedIndex = 0;
$scope.nextTab = function() {
var index = ($scope.selectedIndex == $scope.max) ? 0 : $scope.selectedIndex + 1;
$scope.selectedIndex = index;
};
You are using controllerAs syntax so prefer using vminstead of $scope and also pass vm.selectedIndex here
<md-tabs md-dynamic-height md-border-bottom md-selected="vm.selectedIndex">

Finally, I figured it out.
Instead of using $rootscope, I changed it to vm. So, here's my new code for the tabs:
//Tabs
vm.max = 2;
vm.selectedIndex = 0;
$rootScope.nextTab = function() {
var index = (vm.selectedIndex == $rootScope.max) ? 0 : vm.selectedIndex + 1;
vm.selectedIndex = index;
};
And based on #Rakeschand solution, I passed vm.selectedIndex like this:
<md-tabs md-dynamic-height md-border-bottom md-selected="vm.selectedIndex">
Thanks #Rakeschand for the idea :)

Knockout.js : ObservableArray with ObservableArrays inside?

I'm using this plugin called Dragula which needs an ObservableArray as a source for the data..
HTML/Knockout-bindings
<div class="widget-container">
<div class="widget-content visible" id="team-setup">
<div class="header">
<p>Lagoppsett</p>
<p></p>
</div>
<div class="col-sm-12">
<div class="row">
<div class="widget-container">
<div class="col-xs-6 widget-content visible">
<div class="header">
<p>Tilgjengelige spillere</p>
<p></p>
</div>
<div class="player-card-container-mini" data-bind="dragula: { data: availablePlayers, group: 'playerz' } ">
<div class="player-card-mini">
<div class="player-card-left">
<div class="player-avatar" style="margin-left: 85%;">
<img src="Content/Images/player-female.png" id="imgAvatar" runat="server" />
<div class="player-shirt-no" data-bind="text: ShirtNo"></div>
</div>
</div>
<div class="player-card-subtext">
<div class="player-text">
<div class="player-card-header-small" data-bind="text: PlayerName"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 widget-content visible">
<div class="header">
<p>Lag</p>
<p></p>
</div>
<div data-bind="foreach: teamsetup">
<div data-bind="foreach: SubTeams">
<h1 data-bind="text: TeamSubName"></h1>
<div class="player-card-container-mini" data-bind="dragula: { data: Players, group: 'playerz' } " style="border: 1px solid red; min-height:200px">
<div class="player-card-mini">
<div class="player-card-left">
<div class="player-avatar" style="margin-left: 85%;">
<img src="Content/Images/player-female.png" id="img1" runat="server" />
<div class="player-shirt-no" data-bind="text: ShirtNo"></div>
</div>
</div>
<div class="player-card-subtext">
<div class="player-text">
<div class="player-card-header-small" data-bind="text: PlayerName"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="clear:both"> </div>
</div>
</div>
Knockout code :
var TeamSetupViewModel = function () {
var self = this;
self.teamsetup = ko.observableArray();
self.availablePlayers = ko.observableArray();
self.testPlayers = ko.observableArray();
}
var model = new TeamSetupViewModel();
ko.applyBindings(model, document.getElementById("team-setup"));
var uri = 'api/MainPage/GetTeamSetup/' + getQueryVariable("teamId");
$.get(uri,
function (data) {
model.teamsetup(data);
model.availablePlayers(data.AvailablePlayers);
model.testPlayers(data.AvailablePlayers);
console.log(data);
}, 'json');
});
The problem is... that i'm having a ObservableArray at the top node, and i do need ObservableArrays further down in the hierarchy.
model.availablePlayers works fine, but when accessing the other players in the html/ko foreach loops through teamsetup -> SubTeams -> Players it doesn't work due to Players isn't an ObservableArray. (There might be everyting from 1 to 7 SubTeams with players).
So how can i make the Players in each SubTeams an ObservableArray ?
See the image for the datastructure :

You could use Mapping plugin, but if players is the only thing you need, you can do it manually:
Simplify your view model:
var TeamSetupViewModel = function () {
var self = this;
self.availablePlayers = ko.observableArray();
self.subTeams = ko.observableArray();
}
After you get the data from the server, populate the view model converting the array of players on every team to an observable array of players:
$.get(uri,
function (data) {
model.availablePlayers(data.AvailablePlayers);
model.subTeams(data.SubTeams.map(function(t) { t.Players = ko.observableArray(t.Players); return t; }));
}, 'json');
});
Finally, remove the following line in your template (with its closing tag) - nothing to iterate over anymore:
<div data-bind="foreach: teamsetup">
... and update the name of the property in the next line, so it is camel case like in the VM:
<div data-bind="foreach: subTeams">

Search data on click event of button using smart table

I am very new to the smart table. I have gone through its documentation on Smart Table.
But the I haven't found how to bind data on click event in smart table?
Code is very big but I am trying to post it here.
<div class="table-scroll-x" st-table="backlinksData" st-safe-src="backlinks" st-set-filter="myStrictFilter">
<div class="crawlhealthshowcontent">
<div class="crawlhealthshowcontent-right">
<input type="text" class="crserachinput" placeholder="My URL" st-search="{{TargetUrl}}" />
<a class="bluebtn">Search</a>
</div>
<div class="clearfix"></div>
</div>
<br />
<div class="table-header clearfix">
<div class="row">
<div class="col-sm-6_5">
<div st-sort="SourceUrl" st-skip-natural="true">
Page URL
</div>
</div>
<div class="col-sm-2">
<div st-sort="SourceAnchor" st-skip-natural="true">
Anchor Text
</div>
</div>
<div class="col-sm-1">
<div st-sort="ExternalLinksCount" st-skip-natural="true">
External<br />Links
</div>
</div>
<div class="col-sm-1">
<div st-sort="InternalLinksCount" st-skip-natural="true">
Internal<br />Links
</div>
</div>
<div class="col-sm-1">
<div st-sort="IsFollow" st-skip-natural="true">
Type
</div>
</div>
</div>
</div>
<div class="table-body clearfix">
<div class="row" ng-repeat="backlink in backlinksData" ng-if="backlinks.length > 0">
<div class="col-sm-6_5">
<div class="pos-rel">
<span class="display-inline wrapWord" tool-tip="{{ backlink.SourceUrl }}"><b>Backlink source:</b> <a target="_blank" href="{{backlink.SourceUrl}}">{{ backlink.SourceUrl }}</a></span><br />
<span class="display-inline wrapWord" tool-tip="{{ backlink.SourceTitle }}"><b>Link description:</b> {{ backlink.SourceTitle }}</span> <br />
<span class="display-inline wrapWord" tool-tip="{{ backlink.TargetUrl }}"><b>My URL:</b> <a target="_blank" href="{{backlink.TargetUrl}}">{{ backlink.TargetUrl }}</a></span><br />
</div>
</div>
<div class="col-sm-2">
<div class="pos-rel">
{{ backlink.SourceAnchor }}
</div>
</div>
<div class="col-sm-1">
<div>
{{ backlink.ExternalLinksCount }}
</div>
</div>
<div class="col-sm-1">
<div>
{{ backlink.InternalLinksCount }}
</div>
</div>
<div class="col-sm-1">
<div ng-if="!backlink.IsFollow">
No Follow
</div>
</div>
</div>
<div class="row" ng-if="backlinks.length == 0">
No backlinks exists for selected location.
</div>
</div>
<div class="pos-rel" st-pagination="" st-displayed-pages="10" st-template="Home/PaginationCustom"></div>
</div>
and my js code is here.
module.controller('backlinksController', [
'$scope','$filter', 'mcatSharedDataService', 'globalVariables', 'backlinksService',
function ($scope,$filter, mcatSharedDataService, globalVariables, backlinksService) {
$scope.dataExistsValues = globalVariables.dataExistsValues;
var initialize = function () {
$scope.backlinks = undefined;
$scope.sortOrderAsc = true;
$scope.sortColumnIndex = 0;
};
initialize();
$scope.itemsByPage = 5;
var updateTableStartPage = function () {
// clear table before loading
$scope.backlinks = [];
// end clear table before loading
updateTableData();
};
var updateTableData = function () {
var property = mcatSharedDataService.PropertyDetails();
if (property == undefined || property.Primary == null || property.Primary == undefined || property.Primary.PropertyId <= 0) {
return;
}
var params = {
PropertyId: property.Primary.PropertyId
};
var backLinksDataPromise = backlinksService.getBackLinksData($scope, params);
$scope.Loading = backLinksDataPromise;
};
mcatSharedDataService.subscribeCustomerLocationsChanged($scope, updateTableStartPage);
}
]);
module.filter('myStrictFilter', function ($filter) {
return function (input, predicate) {
return $filter('filter')(input, predicate, true);
}
});
But It is working fine with the direct search on textbox.
but according to the requirement I have to perform it on button click.
Your suggestions and help would be appreciated.
Thanks in advance.

You can search for a specific row by making some simple tweaks.
add a filter to the ng-repeat, and filter it by a model that you will insert on the button click, like so: <tr ng-repeat="row in rowCollection | filter: searchQuery">
in your view, add that model (using ng-model) to an input tag and define it in your controller
then pass the value to the filter when you click the search button
here's a plunk that demonstrates this
you can use filter:searchQuery:true for strict search
EDIT:
OK, so OP's big problem was that the filtered values wouldn't show properly when paginated, the filter query is taken from an input box rather then using the de-facto st-search plug-in, So I referred to an already existing issue in github (similar), I've pulled out this plunk and modified it slightly to fit the questioned use case.

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.