I have a partial view, which I plan to include in different pages.
I tried out the following to load the partial view but the view doesn't display the values stored in the model.
Angular controller:
//This gets the required data as JSON
AdminService.getSettings(function (callback) {
$scope.attributes = callback;
$scope.groups = _.groupBy($scope.attributes, "Group");
$scope.previous = angular.copy($scope.attributes);
//This gets the partial view and adds to the main view
CommonService.SettingsListView_get(function (callback) {
angular.element('#settingsList').html(callback);
});
});
MVC Controller:
public ActionResult SettingsList()
{
return PartialView();
}
View: Main
<body ng-app="AngularAdmin" ng-cloak>
<div ng-controller="SettingsCtrl" id="top" ng-init="init()">
<br />
<div id="settingsList" >
</div>
View:partial
<div class="panel-group" id="accordion">
<div style="padding:5px 0"><button ng-click="updateAttributes(attributes)" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Update Settings</button></div>
<div class="panel panel-primary" data-ng-repeat="(items, item) in groups" ng-style="$index < 11 ? panelStyle[$index] : commonPanelStyle">
<div class="panel-heading" ng-style="$index < 11 ? panelHeaderStyle[$index] : commonPanelHeaderStyle">
<a data-toggle="collapse" href="#accordion{{$index}}" ng-style="anchorStyle">
<h4 class="panel-title">
{{ items }}
</h4>
</a>
</div>
<div id="accordion{{$index}}" class="panel-collapse collapse">
<div class="panel-body" ng-style="$index < 11 ? panelBodyStyle[$index] : commonPanelBodyStyle">
<table class="table">
<tr>
<th>Attribute</th>
<th>Description</th>
<th>Value</th>
<th>Taken from</th>
<th>Editable</th>
<th>Delete</th>
</tr>
<tr data-ng-repeat="i in item">
<td> {{ i.AttributeName }} </td>
<td> {{ i.Description }} </td>
<td> <input type="text" ng-model="i.Value" class="form-control" ng-disabled="{{!i.Editable}}" />
</td>
<td><span ng-bind="i.TakenFrom | settingsfilter">{{ Heritage }}</span> </td>
<td><span ng-class="i.Editable | activefilter : { icon1 : 'glyphicon-edit', icon2 : 'glyphicon-remove'}" class="glyphicon" style="font-weight: bolder"></span></td>
<td><span ng-click="deleteAttribute(i.AttributeGuid)" ng-class="i.TakenFrom | deletefilter : 1" class="glyphicon" style="font-weight: bolder"></span></td>
</tr>
</table>
<button style="float:right" class="btn btn-default" ng-click="updateAttributes(item)"><span class="glyphicon glyphicon-floppy-disk"></span> Update <em>{{ items }}</em> Settings </button>
</div>
</div>
Issue:
I can't display the settings data I can see {{ items }} and nothing else in the view.
The preferred way to achieve this is to create a "settingsList" directive and set the templateUrl to the url of the partial view. You could get rid of this:
CommonService.SettingsListView_get(function (callback) {
angular.element('#settingsList').html(callback);
});
and replace this:
<div id="settingsList" >
</div>
with this:
<div settingsList></div>
If for some reason this isn't possible in your situation, try changing your controller code the following (you'll need to inject the $compile service):
CommonService.SettingsListView_get(function (callback) {
var element = angular.element(callback);
$compile(element)($scope);
angular.element('#settingsList').append(element);
$scope.digest();
});
this code working good :
CommonService.SettingsListView_get(function (callback) {
var element `enter code here`= angular.element(callback);
$compile(angular.element('#settingsList').append(element))($scope);
});
Related
How do i switch from one tab to another tab in angular js? I am using multiple divs for creating tabs. I want to switch from one tab to another by click on button.
This is part of my code -
<div ng-controller="MyController">
<div class="tabgroup" ng-init="tab=1">
<div class="tab" ng-class="{selected: tab==1}" ng-click="tab = 1">Home</div>
<div class="tab" ng-class="{selected: tab==2}" ng-click="tab = 2">Display Records</div>
<div class="tab" ng-class="{selected: tab==3}" ng-click="tab = 3">Add Records</div>
<div class="tab" ng-class="{selected: tab==4}" ng-click="tab = 4">Remove Records</div>
</div>
<div class="otherContainer">
<div class="tabcontents">
<div ng-show="tab == 1">
This application shows employee details registered for this site. You can add your records by clicking on add button. Also you can update and delete records.
</div>
<div ng-show="tab == 2">
<table border=1>
<thead>
<th>Id</th>
<th>Name</th>
<th>Birthdate</th>
<th>Address</th>
<th>Contact</th>
<th>Email</th>
</thead>
<tr data-ng-repeat="Emp in EmpList">
<td ng-bind="Emp.Id"></td>
<td ng-bind="Emp.Name"></td>
<td ng-bind="Emp.Birthdate"></td>
<td ng-bind="Emp.Address"></td>
<td ng-bind="Emp.Contact"></td>
<td ng-bind="Emp.Email"></td>
<th><input type="button" ng-click="removeItem()" value="Remove" /></th>
<th><input type="button" ng-click="editItem(i)" value="Edit" /></th>
</tr>
</table>
</div>
You can refer the following sample
//in your controller
// code to switch you views based on tabs
$scope.onep = true; // sets bydefault true on div
$scope.one = function() {
$scope.onep = true;
$scope.twop = false;
$scope.threep = false;
}
//follow as above for funcions two() and three()
//your tabs
<div ng-click=one()>
//div content
</div>
<div ng-click=two()>
//div content
</div>
<div ng-click=three()>
//div content
</div>
<p ng-show=onep></p>
<p ng-show=twop></p>
<p ng-show=threep></p>
Using JavaScript for this problem will easily solve the problem.
<div class="tab" data-target="#tab1" ng-class="{selected: tab==1}" ng-click="goToTab(1)">Home</div>
In your controller
$scope.goToTab = function(tabIndex) {
$scope.tab = tabIndex;
angular.element('[data-target="#tab'+tabIndex+'"]').tab('show');
}
I have ngTable with some rows.
My ngTable is showing into view:'configClinicasClinicas.html' without problem.
I have created a new view to add a row into "addClinica.html".
My data rows is coming from my local node server.
To test, I initially loaded the ui-route state('configuracoes.clinicas.clinicas') to show the table.
After that, I click a button to load a new state('configuracoes.clinicas.addclinica') to add a new row. Next, I post the new data to server. So far so good, no problem until here.
The problem is that after I post the new data row to server,I use $state.go to load my table again but my new row just posted doesn´t appears in the table. I can see the new row is coming from server, but it is not showing in the table.
My new added row appears on the table as a blank row without data.
If I click again to add a new row I get the error of "Duplicates in a repeater are not allowed".
I am a newbie with ngTable.
What am I missiing here?
//Error:
Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: row in $data track by row.id, Duplicate key: undefined, Duplicate value: {"clinica":{"id":6,"nome":"sadf","endereco":"sadf","bairro":"sadf","cidade":"sdfsaass","uf":"sdafasd","telefone":"sadfasd","isAtivo":true,"coord":{"id":2,"latitude":-49.4,"longitude":23.2}}}
http://errors.angularjs.org/1.6.1/ngRepeat/dupes?p0=row%20in%20%24data%20tr…%7B%22id%22%3A2%2C%22latitude%22%3A-49.4%2C%22longitude%22%3A23.2%7D%7D%7D
at angular.js:68
at ngRepeatAction (angular.js:30804)
at $watchCollectionAction (angular.js:17677)
at Scope.$digest (angular.js:17814)
at Scope.$apply (angular.js:18080)
at done (angular.js:12210)
at completeRequest (angular.js:12436)
at XMLHttpRequest.requestLoaded (angular.js:12364)
//configClinicasClinicas.html'
<p>
<a class="btn btn-sm btn-success" ui-sref="configuracoes.clinicas.addclinica">Add Clinic
</a>
</p>
<table ng-table="tableParams" class="table table-bordered table-striped table-condensed">
<tr ng-repeat="row in $data track by row.id">
<td data-title="'Nome'" filter="{name: 'text'}" sortable="'nome'">{{row.nome}}</td>
<td align="center" valign="center" data-title="'Endereço'"> {{row.endereco}}</td>
<td align="center" valign="center" data-title="'Bairro'" > {{row.bairro}}</td>
<td align="center" valign="center" data-title="'Cidade'" > {{row.cidade}}</td>
<td align="center" valign="center" data-title="'Estado'" > {{row.uf}}</td>
<td align="center" valign="center" data-title="'Telefone'" > {{row.telefone}}</td>
<td align="center" valign="center" data-title="'Ativo'"> <span ng-class="row.isAtivo ? 'label label-info' : 'label label-danger' "> {{row.isAtivo ? "Ativo":"Inativo"}} </span></td>
</tr>
</table>
</table>
//addClinica.html
<div class="col-md-9">
<form class="form-horizontal">
<fieldset>
<legend>
Dados da clínica
</legend>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right" for="registro">
ID
</label>
<div class="col-sm-5 col-lg-4">
<input id="registro" name="clinica.id" ng-model="clinica.id" type="number" class="form-control inline">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right" for="nome" title="Nome">
Nome *
</label>
<div class="col-sm-5 col-lg-4">
<input name="clinica.nome" id="nome" ng-model="clinica.nome" class="form-control " type="text" required="required" maxlength="60">
</div>
</div>
</fieldset>
...
....
<div class="col-xs-12 no-padding pull-right">
<div class="clearfix form-actions">
<div class="col-md-offset-3 col-md-9">
<a class="btn btn-primary" ng-click="saveClinica(clinica)">
<i class="fa fa-check bigger-110"></i>
Save
</a>
<a class="btn btn-success" ui-sref="smenupacientes.clinicas.clinicas()">
<i class="fa fa-close bigger-110"></i>
Cancel
</a>
</div>
</div>
</div>
</form>
</div>
//JS
angular.module("clinang", ["ngTable", "ui.router","ui.bootstrap"]);
angular.module("clinang").config(function($stateProvider, $urlMatcherFactoryProvider,$urlRouterProvider,$locationProvider) {
//$locationProvider.html5Mode(true);
$urlMatcherFactoryProvider.caseInsensitive(true);
// the known route, with missing '/' - let's create alias
$urlRouterProvider.when('', '/pacientes');
// the unknown
$urlRouterProvider.otherwise('/404');
$stateProvider
.... other states
.state('configuracoes.clinicas.addclinica', {
url: '/addclicnica',
views:{
'configclinicasaddclicnica#configuracoes.clinicas':{
templateUrl: '/views/addClinica.html',
controller: 'configClinicaClinicaAddClinicaCtrl'
}
}
})
.state('configuracoes.clinicas.clinicas', {
url: '/configclinicasclinicas',
views:{
'configclinicasclinicas#configuracoes.clinicas':{
templateUrl: '/views/configClinicasClinicas.html',
controller: 'configClinicaClinicaCtrl'
}
}
})
});
//Controllers
ngular.module("clinang").controller('configClinicaClinicaAddClinicaCtrl',['$scope','$http', '$state','NgTableParams', function($scope,$http, $state,NgTableParams) {
$scope.clinica={};
$scope.saveClinica=function(clinica){
var coord={id:2, latitude:-49.4, longitude:23.2};
clinica.coord=coord;
$http.post('/clinicas',{clinica}).then(function(response){
delete $scope.clinica;
$state.go('configuracoes.clinicas.clinicas');
}, function(error){
console.log(error)
})
}
}]);
angular.module("clinang").controller('configClinicaClinicaCtrl',['$scope','$http', '$state','NgTableParams', function($scope,$http, $state,NgTableParams) {
$scope.tableParams = new NgTableParams({}, {
getData: function(params) {
return $http.get('/clinicas',{params:{where:params}}).then(function(response){
params.total(response.data.length); // recal. page nav controls
console.log(JSON.stringify(response.data));
return response.data;
}, function(error){
console.log(error)
})
}})
}]);
I'd like to add a custom filter on my angularJS app. I want di strike text like this way if the object in the ng-repat has the isDeleted flag set as true. Code: here the HTML:
<table id="tableText" class="table table-hover table-striped" ng-init="allNews()">
<tr>
<th>Titolo</th>
<th>Text</th>
<th>Disattivato</th>
<th>Modifica</th>
<th ng-if="!cancelDelete">Elimina</th>
<th ng-if="cancelDelete">Annulla</th>
</tr>
<tr ng-repeat="news in allNews | filter: deleteTitleText(news)">
<td>
<div ng-hide="editingData[news.id]">{{ news.title }}</div>
<div ng-show="editingData[news.id]"><input type="text" class="form-control" ng-model="news.title" /></div>
</td>
<td>
<div ng-hide="editingData[news.id]">{{ news.arg }}</div>
<div ng-show="editingData[news.id]"><input type="text" class="form-control" ng-model="news.arg" /></div>
</td>
<td>
<div ng-hide="editingData[news.id]"><input type="checkbox" disabled ng-model="news.isDeleted"></div>
<div ng-show="editingData[news.id]"><input type="checkbox" ng-model="news.isDeleted"></div>
</td>
<td>
<div ng-hide="editingData[news.id]"><button id="modify" class="btn btn-primary" ng-click="modify(news, $event)">Modifica</button></div>
<div ng-show="editingData[news.id]"><button id="accept" class="btn btn-success" ng-click="update(news)">Accetta</button></div>
</td>
<td>
<div ng-hide="editingData[news.id]"><button id="delete" class="btn btn-danger" ng-click="delete(news.id)">Cancella</button></div>
<div ng-show="editingData[news.id]"><button id="cancel" class="btn btn-danger" ng-click="cancelModify()">Annulla</button></div>
</td>
</tr>
</table>
The JS:
app.filter('deleteTitleText', function () {
return function (news) {
if (news.isDeleted == true) {
news.title = "<span><del>" + news.title + "</del></span>";
news.arg = "<span><del>" + news.arg + "</del></span>";
}
return news;
}
});
This is a good way to implement this kind of filter? For now I receive this error: angular.js:13920 Error: [filter:notarray] Expected array but received: function (). Thanks
OPTION 1:
<table id="tableText" class="table table-hover table-striped" ng-init="allNews()">
<tr>
<th>Titolo</th>
<th>Text</th>
<th>Disattivato</th>
<th>Modifica</th>
<th ng-if="!cancelDelete">Elimina</th>
<th ng-if="cancelDelete">Annulla</th>
</tr>
<tr ng-repeat="news in allNews">
<td>
<div ng-hide="editingData[news.id]">
<span ng-hide="news.isDeleted">{{ news.title }}</span>
<span ng-show="news.isDeleted"><del>{{ news.title }}</del></span>
<!-- USING ng-if -->
<!--
<span ng-if="!news.isDeleted">{{ news.title }}</span>
<span ng-if="news.isDeleted"><del>{{ news.title }}</del></span>
-->
</div>
<div ng-show="editingData[news.id]"><input type="text" class="form-control" ng-model="news.title" /></div>
</td>
<td>
<div ng-hide="editingData[news.id]">
<span ng-hide="news.isDeleted">{{ news.arg }}</span>
<span ng-show="news.isDeleted"><del>{{ news.arg }}</del></span>
<!-- USING ng-if -->
<!--
<span ng-if="!news.isDeleted">{{ news.arg }}</span>
<span ng-if="news.isDeleted"><del>{{ news.arg }}</del></span>
-->
</div>
<div ng-show="editingData[news.id]"><input type="text" class="form-control" ng-model="news.arg" /></div>
</td>
<td>
<div ng-hide="editingData[news.id]"><input type="checkbox" disabled ng-model="news.isDeleted"></div>
<div ng-show="editingData[news.id]"><input type="checkbox" ng-model="news.isDeleted"></div>
</td>
<td>
<div ng-hide="editingData[news.id]"><button id="modify" class="btn btn-primary" ng-click="modify(news, $event)">Modifica</button></div>
<div ng-show="editingData[news.id]"><button id="accept" class="btn btn-success" ng-click="update(news)">Accetta</button></div>
</td>
<td>
<div ng-hide="editingData[news.id]"><button id="delete" class="btn btn-danger" ng-click="delete(news.id)">Cancella</button></div>
<div ng-show="editingData[news.id]"><button id="cancel" class="btn btn-danger" ng-click="cancelModify()">Annulla</button></div>
</td>
</tr>
</table>
OPTION 2:
<span ng-bind-html="news | deleteTitleText"></span>
app.filter('deleteTitleText', function ($sce) {
return function (input) {
if(input.isDeleted) {
output = $sce.trustAsHtml("<del>"+input.title+"</del>");
} else {
output = $sce.trustAsHtml("<span>"+input.title+"</span>");
}
return output;
};
});
remove filter from ng-repeat <tr ng-repeat="news in allNews">
So final would be similar to :
<tr ng-repeat="news in allNews">
<td>
<div ng-hide="editingData[news.id]">
<span ng-bind-html="news | deleteTitleText"></span>
</div>
<div ng-show="editingData[news.id]"><input type="text" class="form-control" ng-model="news.title" /></div>
</td>
....
....
Hope this helps
You need to alter you filter to expect the entire allNews array/object and work with that instead of just a single item in the list.
This might help.
For instance:
app.filter('deleteTitleText', function () {
return function (allNews) {
var filtered = [];
angular.forEach(allNews, function(news) {
if (news.isDeleted == true) {
news.title = "<span><del>" + news.title + "</del></span>";
news.arg = "<span><del>" + news.arg + "</del></span>";
}
filtered.push(news);
});
return filtered;
}
});
Your ng-repeat should be changed from:
ng-repeat="news in allNews | filter: deleteTitleText(news)"
To:
ng-repeat="news in allNews | deleteTitleText"
Try to use ng-style, like in this plunker: https://plnkr.co/edit/0koMSQ54gUChdpB4Vrrm?p=preview
!item.isDisabled ? {'text-decoration': 'line-through'} : {'text-decoration': 'none'}
You can simply use ng-show and ng-hide
<tr ng-repeat="news in allNews">
<span ng-show="news.isDeleted"><del>{{news.title}}</del></span>
<span ng-show="news.isDeleted"><del>{{news.arg}}</del></span>
<span ng-hide="news.isDeleted"><del>{{news.title}}</del></span>
<span ng-hide="news.isDeleted"><del>{{news.arg}}</del></span>
.
.
.
</tr>
I am trying to upload an image from my html an on click of save button, i am calling an upload function in the controller. When i enter the upload function in controller, i am not able to access $scope to check the $scope.file.name.
//upload image.html
<div class="horizontal">
<table border=1 frame=void rules=rows class="ui celled table" >
<thead style="text-align: center;">
<tr>
<th> Id </th>
<th> Question </th>
<th> Option A </th>
<th> Option B </th>
<th> Option C </th>
<th> Option D </th>
<th> Answer </th>
<th> Section id </th>
<th> Image </th>
<th> Edit</th>
</tr></thead>
<tbody ng-repeat="ques in questionObj | filter: searchText" style="text-align: center;">
<tr>
<td>{{$index + 1}}</td>
<td><span ng-show="editEnabled" ng-model="Title">
{{ ques.Title || 'empty' }}
</span>
<div ng-hide="editEnabled">
<textarea ng-model="ques.Title"></textarea>
</div>
</td>
<td><span ng-show="editEnabled" ng-model="Title">{{ques.Option_a || 'empty'}} </span>
<div ng-hide="editEnabled" class="option">
<textarea ng-model="ques.Option_a"></textarea>
</div>
</td>
<td><span ng-show="editEnabled" ng-model="Title">{{ques.Option_b || 'empty'}} </span>
<div ng-hide="editEnabled" class="option">
<textarea ng-model="ques.Option_b"></textarea>
</div>
</td>
<td><span ng-show="editEnabled" ng-model="Title">{{ques.Option_c || 'empty'}} </span>
<div ng-hide="editEnabled" class="option">
<textarea ng-model="ques.Option_c"></textarea>
</div>
</td>
<td><span ng-show="editEnabled" ng-model="Title">{{ques.Option_d || 'empty'}} </span>
<div ng-hide="editEnabled" class="option">
<textarea ng-model="ques.Option_d"></textarea>
</div>
</td>
<td><span ng-show="editEnabled" ng-model="Title">{{ques.Answer || 'empty'}} </span>
<div ng-hide="editEnabled" class="option">
<textarea ng-model="ques.Answer"></textarea>
</div>
</td>
<td><span ng-show="editEnabled" ng-model="Title">{{ques.Section_id || 'empty'}} </span>
<div ng-hide="editEnabled" class="option">
<input type="text" ng-model="ques.Section_id"></input>
</div>
</td>
<td>
<span ng-if="ques.Image != 'nil'" ng-show="editEnabled" ng-model="Title"> <img ng-src="{{ques.Image}}" class="image-container" /></span>
<span ng-if="ques.Image === 'nil'" ng-show="editEnabled" ng-model="Title">No Image</span>
<div ng-if="ques.Image != 'nil'" ng-hide="editEnabled" class="option">
<img ng-src="{{ques.Image}} " class="image-container" />
</div>
<div ng-if="ques.Image === 'nil'" ng-hide="editEnabled" class="option">
<input class="bottom-marg-15" type="file" name="file" file onchange="angular.element(this).scope().imageLoad(this)"></input>
<!-- Progress Bar -->
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="{{ uploadProgress }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ uploadProgress }}%;">
{{ uploadProgress == 0 ? '' : uploadProgress + '%' }}
</div>
</div>
<div ng-repeat="step in stepsModel">
<img class="small-thumb" ng-src="{{step}}" />
</div>
</div>
</td>
<td style="white-space: nowrap">
<div class="buttons" ng-show="editEnabled" ng-show="editEnabled">
<button class="btn btn-primary" ng-click="editEnabled = !editEnabled">edit</button>
<button class="btn btn-danger" ng-click="question.removeUser($index,ques.Id)">del</button>
</div>
<div ng-hide="editEnabled" class="form-buttons form-inline">
<button ng-model="Title" ng-disabled="editQuestionForm.$waiting" ng-click=" upload(); editEnabled = !editEnabled" class="btn btn-primary">
save
</button>
<button type="button" ng-click="editEnabled = !editEnabled" class="btn btn-default">
cancel
</button>
</div>
</td>
</tr>
</tbody>
this is the controller which has the upload function. I am not able to access $scope inside upload function.
'use strict';
angular.module('onlineTestAngularApp')
.controller('editQuestionCtrl', function($scope, GetQuestionsService, $window, $location, localStorageService, ENV) {
var vm = this;
vm.success = false;
vm.auth_token = localStorageService.get('rec-auth-token');
vm.role = localStorageService.get('role');
$scope.editEnabled = true;
$scope.access_key = ENV.access_key;
$scope.secret_key = ENV.secret_key;
$scope.bucket = "q-auth/angular_test/";
$scope.stepsModel = [];
$scope.imageLoad = function(element){
var reader = new FileReader();
reader.onload = $scope.imageIsLoaded;
reader.readAsDataURL(element.files[0]);
}
$scope.imageIsLoaded = function(e){
$scope.$apply(function() {
$scope.stepsModel.push(e.target.result);
});
}
$scope.upload = function($scope){
console.log("inside upload");
}
});
Your upload() is having a parameter called $scope, remove it.
Change:
$scope.upload = function($scope){
console.log("inside upload");
}
To:
$scope.upload = function(){
console.log("inside upload");
};
Because when you call the function upload() it will expect to pass an argument, $scope in the function is taken as local variable of that function, hence becoming undefined.
Once you enter the controller's function you have access to its $scope. There's no need to pass it as a parameter:
Controller
$scope.upload = function() {
console.log($scope.stepsModel) // or any other property
}
It seems you mix two techniques for accessing controller's scope: vm and $scope. My advice is to use vm only for exposing the controller variables to the view. Using $scope will soon be deprecated and I use it mainly for $watching changes in the view.
I have the following code. The goal is, to show spinner for each clicked <span> - but it doesn't show. Why ?
<tr ng-repeat="cat in myItems">
<td>
<div class='spinner' ng-show="{{cat.loading}}">
<img src='/Content/loading.GIF' alt=''/>
</div>
<div ng-click="changeItem(cat)" class="contentCell">
<span>click me</span>
</div>
</td>
</tr>
controller:
$scope.changeItem = function (cat) {
cat.loading = true;
catService.doSth(cat.id).then(function (data) {
cat.loading = false;
});
}
I see that div has ng-hide class, no matter if ng-show="false" or ng-show="true" it remains there, I think that can be the reason
<div class="spinner ng-hide" ng-show="false">
<img alt="" src="/Content/loading.GIF">
</div>
Try to remove the {{}} in the ng-show, it evaluates an expression, not a value .
<tr ng-repeat="cat in myItems">
<td>
<div class='spinner' ng-show="cat.loading">
<img src='/Content/loading.GIF' alt=''/>
</div>
<div ng-click="changeItem(cat)" class="contentCell">
<span>click me</span>
</div>
</td>
</tr>
Try This:
$scope.cat = false;
$scope.changeItem = function (cat) {
$scope.cat.loading = true;
catService.doSth(cat.id).then(function (data) {
$scope.cat.loading = false;
});
}
You are trying to react the $scope.cat but it does not exist