Angular JS newbie here. I am trying to make a basic change to a site at work that I did not build.
I added a column to a table on the database that is called display_appraisal. I wanted it to work the same as a column on the table called display.
I literally copy the code for the display function and changed it to display_appraisal from the html file like this:
<button class="btn btn-mini" ng-class="{'btn-success': manufacturer.display==1, 'btn-danger': manufacturer.display!=1}" ng-click="manufacturers.change_display($index)"><i class="icon-white" ng-class="{'icon-ok': manufacturer.display==1, 'icon-remove': manufacturer.display!=1}"></i></button>
<button class="btn btn-mini" ng-class="{'btn-success': manufacturer.display_appraisal==1, 'btn-danger': manufacturer.display_appraisal!=1}" ng-click="manufacturers.change_display_appraisal($index)"><i class="icon-white" ng-class="{'icon-ok': manufacturer.display_appraisal==1, 'icon-remove': manufacturer.display_appraisal!=1}"></i></button>
then in my ctrl file:
change_display: function(index) {
this.list[index].display = (0 == this.list[index].display) ? 1: 0;
this.update(index, 'display');
},
change_display_appraisal: function(index) {
this.list[index].display_appraisal = (0 == this.list[index].display_appraisal) ? 1: 0;
this.update(index, 'display_appraisal');
},
The buttons are displaying correctly for the values on the table (success for 1, danger for 1). So I know I am pulling in the data correctly. But for some reason, the ng-click does not work. I also added a text box that I can change the value from 0 to 1 and that works.
<input hv-blur ng-change="manufacturers.update($index,'display_appraisal')" placeholder="display_appraisal" type="text" ng-model="manufacturer.display_appraisal">
Any ideas?
Here is a plknr with two ways to do what you need.
Sample
First of all i create a data supposing match with your cause you did not provided the manufaturers array. so.
I put two ways you can change the class of the button.
The first one is using the ng-class like this {'btn-success': manufacturer.display, 'btn-danger': !manufacturer.display} and ng-click "change_display($index)"
Second alternative for your display_appraisal can do like this
ng-class="{true:'btn-success', false:'btn-danger'
[manufacturer.display_appraisal]" ng-click="manufacturer.display_appraisal =
!manufacturer.display_appraisal
with out necessity of a funciton to change the display_apprasial attr.
Check the sample for more detail.
SCRIPT
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.change_display = function(index) {
console.log(index);
$scope.data[index].display = (false == $scope.data[index].display) ? true: false;
};
$scope.data = [
{
name:'one',
display_appraisal : true,
display : true
},
{
name:'two',
display_appraisal : false,
display : true
},
{
name:'three',
display_appraisal : false,
display : false
},
{
name:'four',
display_appraisal : true,
display : false
},
{
name:'five',
display_appraisal : false,
display : false
}
]
});
HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<table class="table table-stripped">
<thead>
<tr>
<th>column1</th>
<th>buttons</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="manufacturer in data">
<td>{{manufacturer.name}}</td>
<td>
<button class="btn btn-mini" ng-class="{'btn-success': manufacturer.display, 'btn-danger': !manufacturer.display}" ng-click="change_display($index)"><i class="icon-white" ng-class="{'icon-ok': manufacturer.display==true, 'icon-remove': manufacturer.display==false}"></i></button>
<button class="btn btn-mini" ng-class="{true:'btn-success', false:'btn-danger'}[manufacturer.display_appraisal]" ng-click="manufacturer.display_appraisal = !manufacturer.display_appraisal"><i class="icon-white" ng-class="{'icon-ok': manufacturer.display_appraisal==true, 'icon-remove': manufacturer.display_appraisal==false}"></i></button></td>
</tr>
</tbody>
</table>
</body>
</html>
Related
From this json array I need to build dynamic radio buttons with mobile numbers in angularjs:
challengeSelectInfo:
[
{"mob_0" : "xxxxx1211"},
{"mob_1" : "xxxxx1211"},
{"mob_2" : "xxxxx1211"}
]
I tried ng-repeat and iterate over challengeSelectInfo but the issue that I'm facing is keys(mob_0,mob_1,mob_2) are different and I'm unable to generate dynamic radio buttons.
Any help is appreciated.
Thanks
You need to specify keys for your arrays :
$scope.newArr = [];
angular.forEach(challengeSelectInfo, function(val, key) {
/* do something for all key: value pairs */
$scope.newArr.push({id: key, value: val});
});
Then loop through newArr arrays and assign to radio button :
<input name="{{item.value}}" type="radio" ng-model="item.id" value="{{item.value}}">
made this simply for your understanding purpose hope you can achieve your requirement by using this
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.challengeSelectInfo= [
{"mob_0" : "xxxxx1211"},
{"mob_1" : "xxxxx1211"},
{"mob_2" : "xxxxx1211"} ];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="(k,v) in challengeSelectInfo ">
<div ng-repeat="(x,y) in v">
<input type="radio" />{{y}}
</div>
</div>
</body>
</html>
Can you check this JSFIDDLE Example
var data = { "challengeSelectInfo" : [ {"mob_0" : "xxxxx1211"},
{"mob_1" : "xxxxx1211"}, {"mob_2" : "xxxxx1211"} ]}
$scope.radioGrp = (data['challengeSelectInfo'] || []).map(function(obj){
for(var i in obj){
return { 'value': i, 'name': obj[i] };
}
});
<input type="radio" ng-repeat="rb in radioGrp" ng-value="rb.value" ng-modal="radioValue" name="{{rb.name}}">
my ng-table is being build like this
<table ng-table="storeCommandsTableParams" class="table tile">
<tr ng-repeat="storeCommand in $data">
<td>
<input type="checkbox" ng-change="vm.toggleCommandSelection(storeCommand)" ng-model="vm.selectedCommands" >
</td>
</tr>
</table>
and i have controller setup like this.
var vm = this;
vm.selectedCommands = { };
vm.toggleCommandSelection = function (storeCommand) {
var idx = vm.selectedCommands.indexOf(storeCommand);
// is currently selected
if (idx > -1) {
vm.selectedCommands.splice(idx, 1);
}
// is newly selected
else {
vm.selectedCommands.push(storeCommand);
}
};
what i am trying to accomplish is that when ever user clicks a check-box the respective storeCommand should be sent to a function vm.toggleCommandSelection so that i could have list of storeCommands selected. but this function is not fired.
Plunker
Your model is not storeCommand but vm.selectedCommands. So ng-change won't be triggered in this case when you click on the checkbox. May be you can use ng-click instead.
Try this
<input type="checkbox" ng-click="vm.toggleCommandSelection($event, storeCommand)">
var vm = this;
vm.selectedCommands = [];
vm.toggleCommandSelection = function ($event, storeCommand) {
var idx = vm.selectedCommands.indexOf(storeCommand);
if ($event.target.checked) {
if (idx === -1) {
vm.selectedCommands.push(storeCommand);
}
}
else {
if (idx > -1) {
vm.selectedCommands.splice(idx, 1);
}
}
};
Demo
http://plnkr.co/edit/kcW7YCWsXE8mtZoxjm1J?p=preview
Question is not cleared but i will suggest you to use $scope. Here i am supposing that all your data in controller is is $scope.data
In from end HTML:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<table ng-table="storeCommandsTableParams" class="table tile">
<tr ng-repeat="category in categories">
<td>
<label class="checkbox" for="{{category.id}}">
<input type="checkbox" ng-model="selection.ids[category.id]" name="group" id="{{category.id}}" / >
{{category.name}}
</td>
</tr>
<pre ng-bind="selection.ids | json"></pre>
</table>
</body>
</html>
In script in respective contrller, write:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.categories = [ { "name": "Sport", "id": "50d5ad" } , {"name": "General", "id": "678ffr" } ];
$scope.selection = {
};
});
Hi, As i understood, i have updated my answer with dummy data. Also please find the working link for plunker here PLUNKER
I'm using AngularJS translate and have problem when I want to show the translate result on the javascript alert popup. Can anyone show me how to do it please? Thank you.
here is my angularjs translate script:
<script>
angular.module('app',['pascalprecht.translate'])
.config(function($translateProvider){
$translateProvider.translations('chs',{
"Name" : "名字",
"Address" : "地址"
});
$translateProvider.translations('esp',{
"Name" : "Как пользоваться",
"Address" : "dirección"
});
$translateProvider.preferredLanguage('chs');
})
.controller('TranslateController', function($translate, $scope) {
$scope.changeLanguage = function (langKey) {
$translate.use(langKey);
};
});
and I want to show the transalation result from javascript
var getLang = function()
{ alert (); // translation result from angularjs}
here is all code on the html :
<html ng-app='app'>
<head>
<meta charset="utf-8">
<title translate="TITLE">Basic usage</title>
<style>body { text-align: center; }</style>
<script src="Scripts/jquery-2.1.3.js" type="text/javascript"></script>
<script>
var getLang = function()
{ alert (); // how to alert translation result from angularjs}
</script>
</head>
<body>
<div id="result"></div>
<div id="timeResult"></div>
<table>
<tr>
<td>{{'Name' | translate}} : </td>
<td></td>
</tr>
<tr>
<td>{{'Address' | translate}} : </td>
<td><input type="button" value="test" onClick="getLang()"/></td>
</tr>
</table>
<script src="Scripts/angular.js" type="text/javascript"></script>
<script src="Scripts/angular-translate.js" type="text/javascript"></script>
<script>
angular.module('app',['pascalprecht.translate'])
.config(function($translateProvider){
$translateProvider.translations('chs',{
"Name" : "名字",
"Address" : "地址"
});
$translateProvider.translations('esp',{
"Name" : "Как пользоваться",
"Address" : "dirección"
});
$translateProvider.preferredLanguage('chs');
});
</script>
</body>
</html>
Thanks
There are definitely a few things missing. Firstly, you need to bind the button to some controller in order for Angular to know it has to do something. After you define a controller, you can need to inject the translate provider and then you will be able to get the translated name and address.
Full code sample:
<html ng-app='app'>
<head>
<meta charset="utf-8">
<title translate="TITLE">Basic usage</title>
<style>body { text-align: center; }</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body ng-controller="TranslateController">
<div id="result"></div>
<div id="timeResult"></div>
<table>
<tr>
<td>Name: {{'Name' | translate}} : </td>
<td></td>
</tr>
<tr>
<td>Address: {{'Address' | translate}} : </td>
<td><input type="button" value="Get Preferred Language Translation" ng-click="getLang()"/></td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.7.0/angular-translate.min.js" type="text/javascript"></script>
<script>
angular.module('app',['pascalprecht.translate'])
.config(function($translateProvider){
$translateProvider.translations('chs',{
"Name" : "名字",
"Address" : "地址"
});
$translateProvider.translations('esp',{
"Name" : "Как пользоваться",
"Address" : "dirección"
});
$translateProvider.preferredLanguage('chs');
})
.controller('TranslateController', function($scope, $translate) {
$scope.getLang = function()
{
$translate(['Name', 'Address']).then(function (translations) {
alert('Name is:' + translations.Name + ' Address is: ' + translations.Address);
});
}
});
</script>
</body>
</html>
I have the following element:
{{ project.label }}
The idea of the ng-class is this: if the photo belongs to the project, the function belongsPhotoToProject returns true, so the selected-project class is set. Now, on click, after the function removeFromProject(project, $index, currentPhoto) is triggered, belongsPhotoToProject does not evaluate to true anymore, so I expect it to remove the class, however, this doesn't happen.
So my questions are: after the initial page load, on which page events does ng-click get triggered? If ng-click gets triggered only on page load, can I manually trigger it again on ng-click?
That should work as you described it. Here's a plnkr showing it:
http://plnkr.co/edit/V4R0EUwKK5TeH5wn7Y5N?p=preview
Are you getting any errors in your browser?
javascript:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.project = {
hasPhotos: true,
label: "My Test Project"
};
$scope.removeFromProject = function(project, $index, currentPhoto) {
$scope.project.hasPhotos = false;
};
$scope.addToProject = function($index, currentPhoto) {
$scope.project.hasPhotos = true;
};
$scope.belongsPhotoToProject = function(project, $index, currentPhoto) {
return $scope.project.hasPhotos;
};
});
html:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
{{ project.label }}
</body>
</html>
css:
.selected-project {
background-color: #ccf;
}
I need a table whose rows can be added dynamically on a button click and the table itself can be re-created and shown on the page with another button click
I have created the following
HTML:
<html ng-app="MyApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Add Rows</title>
<link href="http://cdn.foundation5.zurb.com/foundation.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
</head>
<body ng-controller="MainController">
<a href="#"
class="button"
ng-click="addRow()">
Add Row</a>
<a href="#"
class="button"
ng-click="addTable()">
Add Table </a>
<div ng-repeat="data in table">
<table>
<thead>
<tr>
<th width="200">Name</th>
<th width="200">Age</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="rowContent in rows">
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
</tbody>
</table>
<div>
</body>
</html>
Here's my Controller:
angular.module('MyApp', [])
.controller('MainController', [ '$scope', function($scope) {
$scope.table=['Table 1'];
$scope.rows = ['Row 1'];
$scope.counter = 3;
$scope.addRow = function() {
$scope.rows.push('Row ' + $scope.counter);
$scope.counter++;
}
$scope.addTable = function() {
$scope.table.push('Table ' + $scope.counter);
$scope.counter++;
}
}]);
Everything works fine except that when I click on Add Table , The previous table along with the added rows gets copied.
I want to just have the initial instance of the table with just one row to add age and name.
Please help:
Code pen Link :http://codepen.io/anon/pen/wBwXJP
if you make an object from the table by doing this
$scope.tables=[{name: "table 1"}];
$scope.tables[0].rows=['row1']
this will make it posible to add a row to $scope.tables[0].rows
that way it will only be added to the first
for new you just push
$scope.tables.push({name: 'Table ' + $scope.counter});
and it will create a whole new table
and you have to change rows in
<tr ng-repeat="rowContent in table.rows">
i hope this will help you in the right way
here i edited your code to make it the way i think it is best
code