Develop Reference

ng-class not working in AngularJS when defined with scope variable

For my below code ng-class isn't working:
HTML
<div class="row-content" ng-controller="MainController">
<div class="tabs">
<div class="col-xs-6">
<h3 ng-class="{selected: searchType == 'news'}">
<a ng-click="SetSearchType('news')"
href="javascript:void(0)">Alumni News</a>
</h3>
</div>
<div class="col-xs-6">
<h3 ng-class="{selected: searchType == 'rss'}">
<a ng-click="SetSearchType('rss')"
href="javascript:void(0)">Firm News</a>
</h3>
</div>
</div>
</div>
AnjgularJS
var app = angular.module('ffApp', []);
app.controller('MainController', ['$scope', function($scope) {
$scope.searchType = 'news';
$scope.SetSearchType = function(type) {
$scope.searchType = type;
}
}]);

I think there is something wrong with your CSS styles or your $scope.selected param. Please check this runnable demo fiddle and carefully compare it with your solution:
View
<div class="row-content" ng-controller="MainController">
<div class="tabs">
<div class="col-xs-6">
<h3 ng-class="{'selected': searchType == 'news'}">
<a ng-click="SetSearchType('news')"
href="javascript:void(0)">Alumni News</a>
</h3>
</div>
<div class="col-xs-6">
<h3 ng-class="{'selected': searchType == 'rss'}">
<a ng-click="SetSearchType('rss')"
href="javascript:void(0)">Firm News</a>
</h3>
</div>
</div>
</div>
AngularJS
var myApp = angular.module('myApp', []);
myApp.controller('MainController', function($scope) {
$scope.searchType = 'news';
$scope.SetSearchType = function(type) {
$scope.searchType = type;
}
});
CSS
.selected a {
color:red;
}

put your class in quotes ('')
<div class="row-content" ng-controller="MainController">
<div class="tabs">
<div class="col-xs-6">
<h3 ng-class="{'selected': searchType == 'news'}">
<a ng-click="SetSearchType('news')" href="javascript:void(0)">Alumni News</a>
</h3>
</div>
<div class="col-xs-6">
<h3 ng-class="{'selected': searchType == 'rss'}">
<a ng-click="SetSearchType('rss')" href="javascript:void(0)">Firm News</a>
</h3>
</div>
</div>

Not able to call API data through Angular-controller

I am calling data from my api using - my setup includes angularjs, so I am trying to call through a controller, but some of the data or events does not respond.
so here's my code:
myApp.controller('someAppController',['$scope', '$http','$state','apiUrl','$q','$timeout','$interval', function ($scope, $http, $state,apiUrl,$q,$timeout,$interval) {
var apiURL = apiUrl+"fetchData";
$scope=this;
$scope.fetchAppData = function(device,os){
$scope.dt = device;
$scope.platform = os;
$scope.startDate = $('#sDate').val();
$scope.endDate = $('#eDate').val();
var startDate = $scope.startDate;
var endDate = $scope.endDate;
var deviceType = $scope.dt;
var oSystem = $scope.platform;
var appKey = localStorage.getItem("appKey");
var i;
var dfrd = $q.defer();
$http.get(apiURL,
{
params:{type: deviceType, platform : oSystem, sd: startDate, ed: endDate, akey: appKey},
}
)
.then(function(response) {
$scope.users = response.data;
var data = response.data;
for(var i = 0; i<data.length; i++){
var tts = data[i].tts;
var ts = data[i].ts;
var nuu = data[i].nuu;
var atsps = data[i].tts / data[i].ts;
var atsbu = data[i].tts / data[i].nuu;
if ( isNaN(atsps)|| atsps == Number.POSITIVE_INFINITY || atsps == Number.NEGATIVE_INFINITY || atsps === null)
{ //console.log("false atsps" +atsps);
data[i].atsps = 0;
}
else{
data[i].atsps = atsps;
}
if ( isNaN(atsbu) || atsbu == Number.POSITIVE_INFINITY || atsbu == Number.NEGATIVE_INFINITY || atsbu === null)
{
//console.log("false atsbu" +atsbu);
data[i].atsbu = 0;
}
else{
data[i].atsbu = atsbu;
}
}
$scope.users = data;
}, function(x) {
dfrd.reject(true);
});
return dfrd.promise;
};
$scope.cb= function(start, end){
$('#dateRangescreenAnalytics span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
startDateCal = start;
endDateCal = end;
$scope.fetchAppData($scope.dt,$scope.platform);
}
$scope.cb(moment().subtract(29, 'days'), moment());
$('#dateRangescreenAnalytics').daterangepicker({
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'This Week': [moment().startOf('week'), moment().endOf('week')],
'Last Week': [moment().subtract(1, 'week').startOf('week'), moment().subtract(1, 'week').endOf('week')],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
locale: {
format: 'YYYY-MM-DD',
applyLabel: "Select"
},
startDate: startDateCal,
endDate: endDateCal
}, $scope.cb);
}]);
<div ng-controller="someAppController as deviceCtrl">
<div class="wrapper">
<div class="page">
<div class="row breadcrumb bg-white border-bottom paddl30">
<div class="col-md-6">
<ul>
<li>Voices</li>
<li> > </li>
<li>Datas</li>
</ul>
</div>
</div>
<div class="row bg-white border-bottom">
<div class="col-md-12">
<div class="photos" autofocus>
<img ng-repeat="user in deviceCtrl.users" class="cover" data-name="{{user.name}}" ng-src="{{user.path}}"/>
</div><!-- End of Photos -->
<div id="photos-info">
<div id="photos-name"></div>
</div>
</div> <!-- End of col md 12 -->
</div><!-- End of row -->
<div class="carousel-info text-right col-md-12">
<p>Use arrow < > keys or mouse scroll to view carousel.</p>
</div>
<div class="row">
<ul class="info-container" ng-repeat="user in users" style="display:none">
<li class="col-xs-12 col-sm-4 col-md-2">
<div class="info">
<div class="col-xs-12"><h3>Number of unique users</h3></div>
<div class="col-xs-12"><p>{{deviceCtrl.user.nuu}}</p></div>
</div>
</li>
<li class="col-xs-12 col-sm-4 col-md-2">
<div class="info">
<div class="col-xs-12"><h3>number of crashes</h3></div>
<div class="col-xs-12"><p>{{deviceCtrl.user.noc}}</p></div>
</div>
</li>
<li class="col-xs-12 col-sm-4 col-md-2">
<div class="info">
<div class="col-xs-12"><h3>total time spent</h3></div>
<div class="col-xs-12"><p>{{deviceCtrl.user.tts |secondsToHHmmss}}</p></div>
</div>
</li>
<li class="col-xs-12 col-sm-4 col-md-2">
<div class="info">
<div class="col-xs-12"><h3>Average Time spent by user</h3></div>
<div class="col-xs-12"><p>{{deviceCtrl.user.atsbu |secondsToHHmmss}}</p></div>
</div>
</li>
<li class="col-xs-12 col-sm-4 col-md-2">
<div class="info">
<div class="col-xs-12"><h3>Total sessions</h3></div>
<div class="col-xs-12"><p>{{deviceCtrl.user.ts}}</p></div>
</div>
</li>
<li class="col-xs-12 col-sm-4 col-md-2">
<div class="info">
<div class="col-xs-12"><h3>Average time spent per sessions</h3></div>
<div class="col-xs-12"><p>{{ deviceCtrl.user.atsps |secondsToHHmmss}} </p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
so basically
*
<div class="row">
<ul class="info-container" ng-repeat="user in users" style="display:none">
<li class="col-xs-12 col-sm-4 col-md-2">
<div class="info">
<div class="col-xs-12"><h3>Number of unique users</h3></div>
<div class="col-xs-12"><p>{{deviceCtrl.user.nuu}}</p></div>
</div>
</li>
<li class="col-xs-12 col-sm-4 col-md-2">
<div class="info">
<div class="col-xs-12"><h3>number of crashes</h3></div>
<div class="col-xs-12"><p>{{deviceCtrl.user.noc}}</p></div>
</div>
</li>
<li class="col-xs-12 col-sm-4 col-md-2">
<div class="info">
<div class="col-xs-12"><h3>total time spent</h3></div>
<div class="col-xs-12"><p>{{deviceCtrl.user.tts |secondsToHHmmss}}</p></div>
</div>
</li>
<li class="col-xs-12 col-sm-4 col-md-2">
<div class="info">
<div class="col-xs-12"><h3>Average Time spent by user</h3></div>
<div class="col-xs-12"><p>{{deviceCtrl.user.atsbu |secondsToHHmmss}}</p></div>
</div>
</li>
<li class="col-xs-12 col-sm-4 col-md-2">
<div class="info">
<div class="col-xs-12"><h3>Total sessions</h3></div>
<div class="col-xs-12"><p>{{deviceCtrl.user.ts}}</p></div>
</div>
</li>
<li class="col-xs-12 col-sm-4 col-md-2">
<div class="info">
<div class="col-xs-12"><h3>Average time spent per sessions</h3></div>
<div class="col-xs-12"><p>{{ deviceCtrl.user.atsps |secondsToHHmmss}} </p>
</div>
</div>
</li>
</ul>
</div>
*
part of the code does not respond ?! While, it is supposed to show values.
Any help appreciated. Thanks

It seems that you missed to call your method.
At the end of your controller add this:
$scope.fetchAppData();

Change the div content from click in a list?

How can i make this work with AngularJS? Have this list left-side, and need to change the center div content from the click in this list.
I'm using NG-CLICK and NG-REPEAT to get the click and generate the list from a JSON.
angular.module('duall')
.controller('documentationController', [
'$scope',
'$http',
function($scope, $http){
$scope.docs = [];
$http.get('static/titles.json').success(function(doc){
$scope.docs = doc;
}).error(function(error){
console.log(error);
});
$scope.cliked = function(index){
$scope.item = $scope.docs[index]
};
}]);
<div ng-controller="documentationController">
<div class="row">
<div class="col s3" >
<div class="input-field col s12" >
<input id="search" type="search" ng-model="q" aria-label="filter docs"/>
<label for="search"><strong>Pesquise Algo! :)</strong></label>
<i class="material-icons prefix">search</i>
</div>
<ul class="animate-container">
<!-- <li ng-repeat="docs in docs | orderBy:'title' | filter:q as results "> -->
<li ng-repeat="docs in docs | filter:q as results ">
<i class="material-icons tiny">search</i>
<a ng-click="cliked($index)" href="">{{docs.title}}</a>
<div class="divider"></div>
<br>
</li>
<li ng-if="results.length === 0">
<strong>Nada encontrado :(</strong>
</li>
</ul>
</div> <!-- Fim col s3 -->
<div class="col s9">
<div class="container">
CONTENT CLICKED MUST BE HERE!
</div>
</div>
</div><!-- Fim col s9 -->
</div><!-- fim ROW -->
</div><!-- Fim Controller -->

on the ng-click you can call a function that affect a variable that will contain what you want to see in your container. the following code is only a sample to show you the idea :
First in a ng-repeat you can call a function with ng-click directive :
<li ng-repeat="docs in docs | filter:q as results ">
<i class="material-icons tiny">search</i>
<a ng-click="cliked($index)" href="">{{docs.title}}</a>
<div class="divider"></div>
<br>
</li>
Function that will affect a specific variable
$scope.cliked = function(index){
$scope.item = $scope.docs[index]
};
Variable that you can display in the good container :
<div class="container">
{{$scope.item}}
</div>

Convert to KO JS Mapping my code

I recently started to work with KnockoutJS and i managed to do a simple app to show my data from CouchDB. What i noticed is if i have more data and more nested data i need to appply the mapping plugin in order to get my data more flexible. Some question and answers here are about this plugin but i didn't know how to apply this plugin on my existing web-app.
I recently came a to a problem, i wanted to get the specdial data from my converter and then show it with a computed variable. Even this code does not apply with my view model or i need to apply the plugin : self.Converter = ko.observable(Converter);
So here is my mainJS.
function ViewModel() {
var self = this;
self.myfield = ko.observableArray([]);
self.investigator = ko.observableArray([]);
self.preparatorInfos = ko.observableArray([]);
self.enumInfos = ko.observableArray([]);
//self.Converter = ko.observable(Converter);
//self.Converter = ko.observable(data.Converter);
self.selectDivs = ko.observableArray(['Properties', 'Implements']);
self.selectedDiv = ko.observable();
self.selectDivs2 = ko.observableArray(['Properties', 'Requires']);
self.selectedDiv2 = ko.observable();
}
var db = new PouchDB('http://localhost:5984/helloworld');
var vm = new ViewModel();
db.query("bricksetup/docs").then(function(result) {
var data = result;
console.log(data);
vm.myfield(data.rows);
});
db.query("InvestigatorInfos/docs").then(function(result) {
var data = result;
console.log(data);
vm.investigator(data.rows);
});
db.query("PreparatorInfos/docs").then(function(result) {
var data = result;
console.log(data);
vm.preparatorInfos(data.rows);
});
db.query("EnumInfos/docs").then(function(result) {
var data = result;
console.log(data);
vm.enumInfos(data.rows);
});
ko.applyBindings(vm);
And my View:
<!-- BRICKINFOS -->
<div id="tab1" class="col s12">
<ul class="collapsible" data-collapsible="accordion" data-bind="foreach:myfield">
<li data-bind="with: value">
<div class="collapsible-header">
<i class="material-icons">view_stream</i>
<p class="blue-text" data-bind="text: TypeName"></p>
</div>
<div class="collapsible-body">
<p class="style_p_row" ><b>AssemblyName:</b> <span data-bind="text: AssemblyName"></span></p>
<!-- ko if: Description -->
<p class="style_p_row" ><b>Description:</b> <span data-bind="text: Description"></span></p>
<!-- /ko -->
<p class="style_p_row" ><b>Name: </b><span data-bind="text: Name"></span></p>
<p class="style_p_row" ><b>Obsolete: </b><span data-bind="text: Obsolete"></span></p>
<p class="style_p_row" ><b>TypeName: </b><span data-bind="text: TypeName"></span></p>
<div class="row">
<form class="col s12">
<div class="row">
<div class="col s12 m12">
<div class="col s12 m4 padding_select">
<select class="browser-default "
data-bind="options: $root.selectDivs,
value: $root.selectedDiv,
optionsCaption: 'Choose'">
</select>
</div><!-- end col s6 -->
<div class="col s6 m6" >
<div data-bind="visible: $root.selectedDiv() == 'Properties'" id="Properties">
<!-- ko if: Properties.Properties == ''-->
<p class="blue-text padding_p">Properties</p>is nothing set
<!-- /ko -->
<!-- ko ifnot: Properties.Properties == ''-->
<p class="blue-text padding_p">Properties</p>
<ul data-bind="foreach: Properties.Properties">
<li class="space_bottom">
<b>Name:</b> <span data-bind="text: Name"></span></br>
<b>Converter: </b><span class="converter_class" data-bind="text: converterNames[Converter]"></span></br>
<b>Validation Type: </b><span class="validation_class" data-bind="text:validationName[ValidationType] "></span></br>
<!-- ko if: EnumTypeName -->
<b>EnumType: </b><span class="validation_class" data-bind="text: EnumTypeName"></span></br>
<!-- /ko -->
<!-- ko if: Description -->
<b>Description: </b><span class="validation_class" data-bind="text: Description"></span></br>
<!-- /ko -->
</li>
</ul>
<!-- /ko -->
</div>
<div data-bind="visible: $root.selectedDiv() == 'Implements'" id="Implements">
<p class="blue-text padding_p">Implements Interfaces</p>
<ul data-bind="foreach: Implements.Interfaces">
<li><b>TypeName:</b> <span data-bind="text: $data.TypeName"></span><br></li>
</ul>
</div>
</div>
</div><!-- end col s6 -->
</div>
</div>
</form>
</div><!-- end row -->
</div>
</li>
</ul>
</div>
How my data looks:
I really appreciate the help.

IF you're asking how to use KO mapping, it would be:
instead of
db.query("PreparatorInfos/docs").then(function(result) {
var data = result;
console.log(data);
vm.preparatorInfos(data.rows);
});
it would become:
db.query("PreparatorInfos/docs").then(function(result) {
var data = result;
ko.mapping.fromJS(data, {}, vm.preparatorInfos);
});

Ng-click and ng-show don't work on dynamical content (angular)

Why Ng-click and ng-show don't work on dynamical content, while if i try to switch static tabs everything works fine? What do i need to do, so i could click trough profiles tabs? How to achieve desired effect with smallest code footprint? I hope you guys can help me.
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="active"><a ng-click="tab=1" data-toggle="tab" aria-expanded="true" style="cursor: pointer;">Subscriber</a></li>
<li class=""><a ng-click="tab=2" data-toggle="tab" aria-expanded="true" style="cursor: pointer;">Devices</a></li>
<li class="" ng-repeat="p in profiles"><a ng-click="tab=p.uid" data-toggle="tab" aria-expanded="true" style="cursor: pointer;">{{p.name}}</a></li>
</ul>
<div class="tab-content">
<!-- subscriber tab -->
<div class="tab-pane active" ng-show="tab==1" ng-init="tab=1">
<div class="row">
<div class="col-xs-12">
sssssssssssssssssssssssssssssssss
</div>
</div>
</div>
<!-- subscriber tab -->
<!-- devices tab -->
<div class="tab-pane active" ng-show="tab==2">
<div class="row">
<div class="col-xs-12">
dddddddddddddddddddddddddd
</div><!-- /.row -->
</div><!-- /.tab-pane -->
</div><!-- /.tab-pane -->
<!-- devices tab -->
<!-- profiles tab -->
<div class="tab-pane active" ng-repeat="p in profiles" ng-show="tab==p.uid">
<div class="row">
<div class="col-xs-12">
ppppppppppppppppp
</div><!-- /.row -->
</div><!-- /.tab-pane -->
</div><!-- /.tab-pane -->
<!-- profiles tab -->
</div><!-- /.tab-content -->
</div>
Let say for example that i have profiles object:
$scope.profiles=[
{
"Name" : "Jhonny",
"uid" : "00000"
},
{
"Name" : "Ken",
"uid" : "00001"
},
{
"Name" : "Zelda",
"uid" : "00002"
}]
Thank you in advance!

Set a function for your ng-click directive.
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="" ng-repeat="p in pies"><a ng-click="setTab(p)" >{{p.name}}</a></li>
</ul>
<div class="tab-content">
<!-- profiles tab -->
<div class="tab-pane active" ng-repeat="p in pies" ng-show="tab==p.id">
<div class="row">
<div class="col-xs-12">
{{p.name}}
</div><!-- /.row -->
</div><!-- /.tab-pane -->
</div><!-- /.tab-pane -->
<!-- profiles tab -->
</div><!-- /.tab-content -->
</div>
</div>
</div>
</div>
Javascript :
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.tab = 1;
$scope.setTab = function(p){
$scope.tab = p.id;
}
$scope. pies = [
{name:"kakaolu",id:1},
{name:"kestane",id:2},
{name:"fisne",id:3},
];
}
Jsfiddle