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>
Related
Many times answered, but I still don't understand what's wrong in my code. I'm new to JavaScript and Angular, so please help why I'm getting this error.
Here's my HTML and JavaScript codes. I'm trying to make an array from user input values, show them in table and then insert a button to calculate the cheapest and the most expensive items of the list. Right now I'm stuck in getting the user inputs in the array because of the angular error.
var listaArr = [];
var app = angular.module("ostosLista", []);
app.controller("listaKontrolleri", ['$scope', function($scope) {
$scope.listaArr = [{"syotettyTuote": "syotettyHinta"}];
}]);
var syotettyTuote = $scope.document.getElementById("tuote");
var syotettyHinta = $scope.document.getElementById("hinta");
function lisaaListaanTuote(){
$scope.listaArr.push($scope.syotettyTuote.value);
}
function lisaaListaanHinta(){
$scope.listaArr.push($scope.syotettyHinta.value);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en-US" ng-app="ostosLista">
<head>
<title>Budjetti</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body ng-controller="listaKontrolleri">
<h1>Listasi</h1>
<table>
<tr ng-repeat="syotettyTuote and syotettyHinta in listaArr">
<td>{{ $index + 1 }}</td>
<td>{{ x.syotettyTuote }}</td>
<td>{{ x.syotettyHinta }}</td>
</tr>
</table>
<form>
<fieldset>
<legend>Listaan</legend>
<input id="tuote" type="text" ng-model="syotettyTuote" placeholder="Tuote" />
<button ng-click="lisaaListaanTuote()">Laita listaan</button>
<input id="hinta" type="parseInt" ng-model="syotettyHinta" placeholder="Hinta" />
<button ng-click="lisaaListaanHinta()">Laita listaan</button>
</fieldset>
</form>
<h2>Listasi kallein ja halvin tuote</h2>
<button id="laske" onclick="laske()" placeholder="Laske kallein ja halvin tuote">Laske kallein ja halvin</button>
<textarea id="kallein" placeholder="Kallein" ></textarea>
<textarea id="halvin" placeholder="Halvin"></textarea>
</body>
</html>
You've used $scope object outside the Controller and the code language is a bit difficult to understand.
However, I've added the simple example from your code.
var listaArr = [];
var app = angular.module("ostosLista", []);
app.controller("listaKontrolleri", ['$scope', function($scope) {
$scope.listaArr = [];
$scope.lisaaListaanTuote = function(){
var val = angular.element(document.querySelector("#tuote")).val();
console.log(val);
$scope.listaArr.push(val);
}
}]);
<!DOCTYPE html>
<html lang="en-US" ng-app="ostosLista">
<head>
<title>Budjetti</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body ng-controller="listaKontrolleri">
<h1>Listasi</h1>
<table>
<tr ng-repeat="item in listaArr">
<td>{{item}}</td>
</tr>
</table>
<form>
<fieldset>
<legend>Listaan</legend>
<input id="tuote" type="text" placeholder="Tuote" />
<button ng-click="lisaaListaanTuote()">Laita listaan</button>
</fieldset>
</form>
</body>
</html>
Im a newbie. The data already display in the table even the image. but the problem is when i use div id and call this id for using the display of my image from json file. it didnt show the image in div. Any help? Thanks.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Show JSON Data in Jquery Datatables</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>
</head>
<body>
<br /><br />
<div class="container">
<h1 align="center">Show JSON Data in Jquery Datatables</h3><br />
<h3 align="center">Employee Database</h3><br />
<table id="data-table" class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Designation</th>
<th>Image Path</th>
<th>Support</th>
</tr>
</thead>
</table>
</div>
<label for="name" id="name">Name</label>
<div class="banner-section" id="img-container">
</div>
</body>
</html>
<script>
$(document).ready(function(){
var table= $('#data-table').DataTable({
"ajax" : "employee_data.json",
"columns" : [
{ "data" : "name" },
{ "data" : "gender"}
]
});
$('#data-table tbody').on( 'click', 'button', function () {
var data = table.row( $(this).parents('tr') ).data();
} );
});
</script>
JSON FILE
{"data":[{"name":"dfghj","gender":"asdfg","designation":"dfgh","image":"<img src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAARIAAAC4CAMAAAAYGZMtAAAAqFBMVEX\/\/\/\/MAADNAwPRAADPAADJAADNAgPNCAjOFBT77u7OERHUISH99fXNCwvQIyPNDg7TGhr++vrOGxv11tbRLCz66urXOzvWT0\/SMTHVKyv99PTQISHTPz\/55+f23NzTNTXVSUnyysrZX1\/rq6vvwsLaTk7nmZnif3\/bWVnsuLjkiYnmkpLgbm7moKDYRUXgd3fgg4PeZmbqp6fts7PdcXHdV1feX17lfHy4OLf0AAAeNElEQVR4nO1diWKiSBBNpbsFQVCRcEQUTzxQFK\/8\/59tVbfmmJl4EBMzs6ndnR1vKKpevTq6ubv7kR\/5kR\/5kR\/5katKvdK+9SF8K2lNTTNkw8dbH8e3kXXGUAybhfVbH8q3kPYIteFZBmOh2XFvfTS3l3p\/AoxpuVkLGasxgzdufUQ3lvYTRz1YNWYyHs7tSDNZeutjuqVU+i6TooUsn6F11Df4wPv\/Imx7xjnpI2CMm6v9kyk+6N\/0sG4nE2PMpoa0ET7rPj\/9iI+zGx7WzaTb73qzwRDh1OP2vPL6pZyH7H8HsJV+wPnMnftmaL02ECVdXuOjmxzXzaSbA2c7NtzmGGJWf0DSmhfz\/xFde5ybnPWQkSGA8PxXA1GyQm9af\/Fx3Uy6iyBH9JxSoGVJ+Z13VTTGoi89rlvJw7THDXcs1cF7fzYQJQ0Mzf9+Rlxvp4iaCRF2xu13DWQvhhasjr\/jr5fWXGOpydiSl04YiBLvH6cm9XY25DNOHhNua8k5ZD1hGv93ARYdJjW0Ts42fsjHZ1Kwshuy5ece181kPcW0n8UBMzvcTB7O\/lyXMTj\/3X+PNFqIpMzNn4bch9ngos9irP7nSgSVdYezklGbMY+z7bp14ccbjC3+LQbbeuKZxFMMukP\/MgNRMmPxP5T7Pa6ayMaIgZgxN9NimDDgbHbl47qZNBAGajVUCdJynhe+0nWfZf8Egy0PMmAlZrFFj3n29FIEeS0Di02udlw3k27O3Z3GFguO9jEsgiCvpP7EF9c5rJtJeR5SITVHhwkS\/iEDkVJpWeyDWr2tDGbcqNn70nJ2lVhRX4Z\/b3HtIZmGCCDhxjYzO1t+2ECUVMosv9JXfbUMtmgctRJjXlxjiytCYpJ7yfW+7cuklTJuyb4D\/bu8al6yiji75vd9hdQnHUJUyw5JKdm10\/lpLcz+LoBtLzVPdS+DkPPRxbyqvD7hZG3mLsdFj+7rpT6ZkX24nEXoMdHlBtJdCBAn3pOZBj9Rkvw28tj32PaJMQPTmFlYwEASR3SgJE6UHCc84n8FwJZXnmkuVtPhLDYZ9y5vaXfHXQDY4n8nWhN1CmUFj\/LL5KHf2CCiDmf51NUwxBQzEJEHYKFGenDi4yN0ytPF6xtKdxoyPptwtpuuuBlyb31xkaebgwdV2CxAq9qgwwl62kb1f9sSQXk9zuQsSHTHNzU25NnlBlKZ2wJtw0fz6IHj4l9dcUKpESvBt5y\/aScR1LJayUClhAm1MPP+xQZSyQVEBtxDLwKxBJih3\/TghFsMeGbMix72p0k7DWssZGaG4SVjQY4IsimU1tmgNatwfw8RgD2DDLLoJBGr00Uo8mOfJ+2pScN1bFhTpKw2McNJ5fTn\/iQrMHwPrcRAjTizQJyVHi4QYL9RDbadWDVShRmaNvHUKoLrovjxVQS4GqrEysCF\/Mz0sG0y9l1KBA9JzEus6iM5LWUZi2vIQXarD\/URNoCug\/+5GIGX52bMiFz8OwBspd8qKU9hKVqHOWbDsFQAQdZvolJDRJmHkBpgzBmc299c8ZDffoqg298122gcplLKuGn1vNHlCNJedsTmzTP22N0glBCgxJ0zq0MVdFz70p++rjykITdYWN8bCXJUtNwCCDLpCAdg+EaRfQJWAMsGw8sO\/c1Tvrhh4U0BduJLPmayFmOaxViM+vBWlxtIqokmBtoA3mRAFYCNhSaiB2AYKg1uj+Ynvr0BJtscf8vnCUZcRJCxGY401lZzy3yxuTzHQANpEpAmyE+DN6+MNFtHfAWkfhRz6oOFEOkpKmZiGlEw7n9QBkPOsjEG29UYmVmDezTFPS9SrsDzzZC3V2NHB\/HG5ssATgBjfDEzYDYF0fOQ1Z\/4urnP2A0myFupqawiDamKOnya45\/vzGCelIlK\/S1wETjetqdiwFyvp8G4EwAlOZACiBPJ0mMUsLjYkRSXrkIQpKk7ZvH5ZMejCZsXZwOx7qJ\/OONqUALx5mv6VBGADZRmm40qmSC05Ce+bvbVDLaiunQHMXecpUn\/Q\/W9KVg+niqefbX61gbqAvQoAte30FrQjizKecSJH+vi8T195Hguk\/aC9LHdZzDIUFkQz4rMP5TLLyf2IGCDdAxGAqrwtt4xAnSmUQfDcAKG3iSKAuIkwFr2l02QD1QNhA2HzDM98htW213eJ2ivh7omnKB30IoPxhKxwpojDcnfmElb9ELM+xynmY11HUJUSOdUGL6b4yF+yYBjpRu8cpiaYT1l3L5gxG4vD4krBEZWAy1C7A98IKyxGIeAzCT13pIKdBv0FehgfPY6IMTsDJR45F8yQd4e1Wolxocs0KyI\/oIh53IOUh9sqVCm6egAmoawsP8GpB1zjC65rxv3bytna8yHQev5qZYsNumZeWQPAfaz52+6Y5YuYub1e\/4IA00tmQ9Lp6a4f5dWN0GFNIloUG0IBXT1yqAXCh1hoxP\/GmTr4Gqa4Th9\/KQ4t3FFAPvJJYLlU6k+oPn+lIeY36Gnji9HkMFYzJcURmEh8OxRH6gTobLWluiMdbBCjLNIQt58bCSQx3mwRES5F+eWCGrM+MT2cKVVzwdTts4ww6Tl26zJtPTioYUHzGJAPGzA3vXiZL4hzRikFku9Pia7gXtjBlXtLYNtNyOftNGRNcczfy5h2qcBbCvdoSYink\/QFm029A0+vpykNsYCr36QpbsoivqxjVi5sR1pJ\/sLPxAKRpv059s43JktfSQlGRqLZp+JEGX+WQsN6skjMnbMXry7TC29HF08pEvSoBCzmeiY6oIdUcBRPNSD0uHCQ4a+BDOpmLcMdu3GY3o2ppz4uTpUOY5kBLCfMn\/zsFM8hE+60Kwxvi06qzDOYBkLMDpUXl4+3pV1m85Sw390deGTaoRJzGIJ9yWYveFideF3SH+RTQ0\/FXJaixMdrAEe+LTgwR4TdJYaEVU+vss8Xp1ezEHKh3MbkFUgfuqkCDrUQY+esUsRBKqE+ADNHLRgRCz2F8gYORvisG7kWDr5WX0dlUTbP\/7TjFmzqzLYx2me7nrM1pCS0cB+ZTS9fIKquxHPSAmUyErwADUTEYGjBwgRkIE68rGYQFUPe3Dvw9vZ77aInQCJK\/6hQ6c1AnS8dCKOW2zKLLhi7tdaqPlcw2WZyWZxkRy3PK+K2Hhu4i4hKikmgqqhWDCnbAXuPYieARYT\/wjxVQvs7K1bREHPIacZU\/MP4QhiI4DOcTNpcT64mpU0EEBCZj5T99\/WKp8h3VzQ+Rkg9vlIWyhuRoYCFAsqIpTRpdo88JBq00feTg5lQfyWwaIe7hUi3wPV2UR\/DIvFcfgcsyS8DsAOfMr4NY3NfVlZZpenuY9z2wCthCdQuocDmmQHlZDrEKJudEnXPKSy6vwTkTkeWkBGYPK2LEboatSoe3EPIX5ggiEsHR9PiAlgr7FEZ42ZC9oHd8csX2icdy53R2kgnuaAQxHieQuaiXhWyb2gUaGBshtiYepHysL3PbQHhxTQfPOd0wBKWkCtcsldGhuBenH8445BFn7x0f8ilcTY0qqH2jbiAee5V2RId0ako0RGniOCBu7zMBU8m4km7aIlno1mj9zoMzapY4bO9XYGqz1TTKZPzb8dEr+qDsI5Ma4yxUv7sQHHhxHlSozXasxLRv1Bt1gqOaeD3l\/\/UjoH7VAWnD6DiS4BdvL8GPYH3hWUEN5TcPq1mojpoI6KznMQozYGcyGmJxGuhefzkQHHxg6YaYbj6XzQKgbUFeX+6OXVmic56OhuiiZj7Glm6wVgwfLqiXxI6jEOEHznuDnNCUSkEth\/rCtfnAjZ8wPH6t4h3thnFXqHjIWFC8Ld5WY+aXykftpeCq7g7kDWxfwup\/9XDyjY2auEvAOlEVGeh8ghnkEwkewFtpQByupSee7vQ7SMNqiTfqUk8jPtF5nm+Fb739RXYXUL+zLxmFIRhMjpnS8cKhU5hyMU+xiMwRfVIro9spH4VRGkLGAEup4FZGQhAXWzeq+yN+l2MGoPTi62fyUYKG6zaqkxy5qOZOo9epjgtdQXSB3QMzSn+gopJa0IFFSgzkSyobLQ67piroC5Bxi9CVdIhMR45DWYIUaXtYrKnneDVUv1dSDdBK+hpUmO3R01iWxN18rS0RMOVJSuNGypxChdRod8KeDNZezKHFkjKymBE0EmVgAqB+qAMC4t9D5GbfOrW6GNhZBOXpKnP4PqHSWu5C1NPLvq3lHEK4Cl5A+qFlhoL47Qf73oDgRjBUXgz0YQ60RmJdxP\/AIkemhePjb4MZnqEvQ0gga0EoRNQkpZ\/mpK7nqvovEBYH3JtGSc0ajq\/rujz0Ent0qRnNpiTl6mP5fxL5dGXnR7sXq9UkyXbVnHAE3Di06nHtjk+CmxrYVShi\/N5zDEvWew0s8g+hMPRIDVY0KTcgKaq5FFne6Lv3NWtKfUafby28dajXUynReu72dIIzq6qi1TuhaCrwBhbkvr15bSr94yWIJXspQ\/XoZZjATEHhDdh2aTQnK4LHJ4jSdMz0w418Ae6\/WHxmS+7NFSw+Bk7+yITIQGdmRQzq43UQsdB2lEResFhCQdGVhswtLe\/v2psp2X3O836VK73ClPOc3MayAKrWMiA6HF+nCm27R9u8a4nJDh\/PIRu\/obAAAZOfDYETzcQBbKMKFryPaVDDAwJUZ24KetV7nfO\/7ggEa9HIjnQkAxA9k8Ac2a8uFZXlOZs5rBPYNZBuPx5XDcWIrm63lBddqQurChJmXTAX+pBkaasMxIYbF8x2GVjK\/itcST6I+XY06jSA5yWndaCFYHHuXyBmOzs9TZGlXRnnI1e1jAQPqe5A2v8gYZV3VIbHBjq5oFVPwijETzh6gvDOSxvmSzhwMWJeOQ2\/T+OFH2KGSRCKZFDKT9VDLlYDYfnUVhBn0+k\/s\/oNgFRuxkzZPK6q+rgB010U2BJ8Z8DQ2j16iIkQs9X7REilhJTDR7BbAKSTL6xB+NNPFBxJcvU0FZ57QoDM8uOWsDpcpcg9xmXpOZbgEEuevH1JxSNv+6ljGRfmHvqboYtuogBpEfgOMsuiN8Qcco6jwXE\/cAqyAW\/jiy24XLl6ncEWvUuNwAhQdn5TWN1DCZGdNK1D9vc3hc2qMmzVp68syJgL56TRqOKqM2\/XQOfYSRpTcizE3bVBvQ7WoGLwwWDmhivQewRfL5yuApnw2zLDLPI7mTDLJQLlZm7HLuUllnM+GAyuqJluoGvKppqhSVOnW2N8E0mMDFDijZhegOGYil0YTR\/TPAbkBOV6mC43UHHh5b3bN6ka3UVjNlCCJhEQ7Soiqqti9XoHt0QLfEyy+3VGGRrEi0aRjExUdEytE06n0ho20EL5Y1oPUThzh8i0VngyfObLVguQC5lVJxqD0NOmnE0ChWRD686qH44GzQGAzQtimaQBWhNSfWWY0RcxzK9l0EE+e5E5WDJuuvUsVfPrKbWuQs0mnM4jOYC2LVIK+7YePfiGu8GvSYyGER1FonhrLsXoYQj6gcjc6yIOhtwnMx5U6Wzqhm4L0PsJ8nDRpdDmosYHz5kZWiXVCNOQg0QhKQLfxXAVTTPKIjPtLNSV8Qp3CsqazST+\/aSE0cFXYPzvaAocvA2KxJDPrYKV4o5X2vjseDj5lng4aWqblyX0XIMKjzhnb\/MveUyvGZoO0SoEZOD+5tA5oL0tvdHRWR1RDWMyb3MC9aqokbOLU+\/F2ZDL1Fsp5PLmqrrLjcSrfoFPeLVCRG0pSDvavGsgB4fx+\/RIsHCrVxMqWiYLshRhrSEAhykBGlb4HKfKWCpNDScI8q86TKQss1H6aU5iaYpxkXkX7aSjc4i8a9kkp3PZ3ko7c9nJ7lQGjQeu7OCIOHbqFSvNrLmLqfuW6CkccJxIjQown7HhVlorEsJUnPOQAszTlrpMACSRamFY3dLg9NLVh4lptf5AC0svqya\/C47pSWAi9w1xWdVznCsgOU4+PV7jSEwpUS2OIZGgcAayqSWHkg6pUFaJEqEo17MwJnpRJ4YbCJqtAXWir7sFxwc+pZrGYmbHuhB1RQJe4FNfv2Rqw2msDT38ks\/+WVyZLGqUglYjCl+rnyg5fxqRH0XJC7AqAlkHKqsvoYZQ6V1p+7N2KvZkwLhVcI4CadRbxlbLUxGbdXl7dnJ2atlJ3b9Gj1BERzPJsdBVQLT+iFejyQaTga1GxI6lQDuFczRc9Ei2ZSZcfKitCdontDKc3RSAnRPjPqwQvAnjPi\/LukQ84mKa2KGq1ZUkSl7Yix3DvvvXPR1MEbAeniHoZULbZeWswlcgRXTUxNU1RcCmEE1nO4aAlb9bMwLjXQLnSNvoio3YTGm9XwEZqaVuAsDjLwtyl0HrsyZrgFm7R3GbOr8Vlw0hNDvOzUjaJwW4KI2MVLmF0gPQXETVeH8uP8MRVtcHIk7M+sYqy4KFnQgiaOILDxWxyb7ALtCmr4+V0TCjfyaVMpZqU5788xzJyxmfR7MsEgFZ8z6ihH5hBAJnROFBtLDrWknk+gTzSi6SmsuOsnIAx82XCeu7kDW7mKiykhXr8AuSyaGTRtwjJkspj1UnIken\/+\/RPSTWXGavFs0VtvzisOvSdUO2Odk29byoCJjCvuCIjt+6wpoQKeZ2nbvlxBhPxVTFW9VaM6iPuyWEhlyug7oehLjg+Wk+wrcAiw6IqdVBSiSK20lO2YxdjSMk1Yf3Rfn4QSHH4q6nQFcSnqN4rVQ3fn5nLBGNrEy+C21VFlZ7mVG4KDXE5GLe5DrXBNz5At+FXiKz7R+Y5hKXYqC9KdbpHBhMFgxHnEvVKNjWbe6Z0pTgqNTc8YOwFFY+rTSiigFakpDQmhFSBBeZlS61E40fxO446WeGJmq5Wgqhki6e\/bAg+YJDfVFBEpskV5DGi6K4PMWhQzkIeU7oZTnU9LzEcIWV9lZnPB2NDjx5fr12mahczEkFzqUYRo9Ll4sxhrLt\/QbHRnlAJTHkgNzEUddbXX95igA3Qdn6dmfSob4ZonQ3nl8mUqKIPc53QPOqZlhKnplZq7DWawYX4cYakGVMXoWQ3UjO4MiRT8MghNfAuvPw2\/UxzqENSg68xeFrEiQVuoGqIqguhQol0lTm6F9o7U2xhi1ObJTaRlmytuqkdLz6Z8e+wtqJJITofkao6uYfu\/ow8hZVJeCTBoi4O2kN2ZgApoB8CJYK2q7yUCWFQRkRnhJEUubnvBniLm8rBEa\/eLLO04Iv0n5Hql4xtroUp6kYJPWR\/+U0HUF37jUQ6LyLLHDOgDW6mYffqXCs2OoSSzGXqc0yKrIufymNRgafJ1rTZTi7OvvCKtzqucbVlw7D1y9JZUgjjw3ljnPH3soWlU7y1Y3Q3GufSQnuTq+yWq5bAKWokQxF2QJspWoTpet4choZSPedLnQYmZ8+vPhyzxB4bB0UBMialTVYASiHiUTLrt3w5kkBGNp7AU2wLpB1XNeokovaye6XlySS++Z1x0GqqSmLSnJW2h1DO6wDufsi9nS\/X3jm3TR\/gqmUlvIyumIOZCOOl08gpiH0U+pgqjEedynoQaWYGdjGVgUelfF3ywrLRDPe5Ch9rNaV\/LwDQQQrQJcvfPWiS\/ofp86eheOH6Op0oWMEMfGtLKF2L4kRDB\/FkrQTPRwHMsVTXEP\/1oC8E6k1OZCjIcn6AmEgVWQtLcvcdpI+mgxgxK7Ibp521oNIBozJl5bJ0gjbdYkq\/6gaLyKdVRaUWDfSDQS3At9ZqhFpX1ZH0k7AyfxzhXwgGhXb6W+o769zw0jVLc3xJ1D\/nwc2czN7nxNEx7x5KDGPURQMeBYLMIoBlTDlgCtcxujwsDQaVD695WUAyWsAJVNZLDFPSWshCFFrrVV8NwYu+GIfW46ZYFxaopF0iX5i16o2P7ElDvNsiqOoxtDCvSF1QnG+LmIaAIhAqXgiyBKIg8FQvQFam1DNWQ6BdaCUmhlgejTVgbUpvb6H\/+FmCPXGfMTY\/Wwqn9Euu0xH0WgWVXDwubX0Zx72xoSiVR+f0+weeaGUQ7jZoZzsmNWN+Tygq5pMv4VmPGLmQ2K4RDl8uGhRbrrPix90zAVXV1kaDT6AS2wX2MjoFBSFWRFxD2aAkzTRnK\/HcAVFoLelFMCUCRsl8jkduMh9R9IwvJPt1jnn+ZbirCp+HRUkN5RgmMq4Gj+\/sVY6AaWiVF2Ymu96pyyfc+cZGrA7qJEP0iYFjp54AmYmKyO2QmZ7yUfuG2zztO12A3PP6u8mDqe0M8S0rmqCi9hI6sOjZlLaxF257FNB0BjlISjTNCsip0N4rGjPNov3awVDO17uxrb6i25p0dZk\/TM8qw9fZkPttWn5d70zJDV9XOQG3Nc19CUqIKjBhze4Wi5drlm8jbbpmh1TRikl9\/4wW5e8Il21e057YOLq1W1DBzkUvxqBwZwk6Brkr1JoXuRtFYsF2N7fxGFjCNtkThX+kxB5mqEaQzb3L2QMl93dVBdenQk+RK9TltqZmrIqsoWhKu9GkGs+SWWLO9lonu8Da3ICxLWGezc2q5jZ6QJ0xcpVoj98mnMrFrSE9S+0ec3KDpne\/e0CYoYRajcXj9Fu08frPdFHeMbek+Eqcy7YekKoL94O4Gqi4CbN4dCZXEyNVWHlVX\/7BE4rTU1xHjaWvIh7WaZZme1Vpe2sS\/pnT3O6Ed320MDQRoi0gw6BGVzgCm3c5hc5lOj7qcG1FsSHfEuIGAtqrPlgSobpTceMN4GwHWZOzY1vZr6Mjspefsxx5oBq\/3YIOtVmPdJTSrWeiGR\/W1Bx43WUn3wkXk5RZnTze\/e9pKbti7tY4UdyYiCBE+dBqp2dETPo3QZJT9KDTtFhzzb0uz2HoG\/c8uNTCjWd9mp803onao7WTHlrohetpEWDeOrDFXIGwKtZ2T6ltWCq2AWitGVsr2TMDMJ9\/kHjZP8o7ncXzkcFKqvqoFiuBM+rRGMwdYwck9Ed+X9hKjf0xboExrzK4xi3sfv\/XateSBMQuv17b0\/lvKYj8XQkkfaUPvTjHHHZ\/YO+V9mcjtCzNqPFQ3GrNNHn2rmw1iHI5rZnZsnmEkF8\/cw4h0Ygi77YsIE+Fip4EGwgK1A6qUgPHRN9ozn2QSDI1Rh5lHkr+ykCuIwKcqM0z7PaqgFRvDnBxyOkPdfA2N5RPaDx8Vi4p4LNSP+PJqXAUdjIjGIPp9whSxKIAjranGWa5Usg3IVPjuW961Jgnk+gL\/WK2+J1vmkNnNbovg1S4AI\/VE8sKgJEvtYdNlYcH74X66PA6p+s340d3GNvuyQKsNQqSXK6Q1RQIif0c6C4v56OlbQepbyZkrc8+jJ9rIURfTVh\/y9eUus26nnEULZhzu5qCx7xNz\/yQN3pS7Cp6ort09tFr1AidCI3Z5hTOeHLbaKrLE9IvF1ZjsEHyGZw9o0\/FSSDvLPCGyzua8yF0cvlzWnG2ISV791nYPaY1Ltj7tDnimrbkR1L9DGnNaMNGJXWT25nW\/drClGycttoZlMLMLQ0zrCtzF4UYyRZ0Md1fdt\/4hIXZqmQFfup7HeL2RfGCB2NcLbatFE2BX21Z5sOPcMzu2WdrH3b\/v7uBj9HiN1Y42\/s6WciL1EL\/s5siNvwBRf5EuN+VA3BVcfTBGk9Mz\/L7I25vI01+DIK9FHrz3YfsuJ3RrPrQQ7lqoYiSsTC80\/fwNhLa3rLHxxzynmwN+iRUYrOYjadcYfzpvZ4zvKYq\/msVNvDwPmBazzGBj5lloHiYPPnbfk1vLWrl90ZjTzTllLmuXRVRrIOf5G0jqUXmYDuXaliKfrQyCgOe0H2w0DWXFjGeFNhr5ZuKNqwgnBW6C0e3Ftdjga672GbLYdyotf0gmqvF3YZ5TWdn0uZqbEhRh7s\/hi2aovkKYRpuHXzRcJm+mrcrK\/ZhpGGLcW7Zzry4pC3aadf6tQx\/XAe2hJKfJEJcx6Gp\/PaL+Ig8yjz93MSZNULEx7Tru001gGF\/4fzEFeU9yWQE8586rjyt1d76FLIY0S4yH\/5TDPIuarDi9F2R3Rvs\/jLeMT1hosJCz79abup7I5sWJu7jVV83E27fp5M5j8TUXk307oS3ZvKPZcHvRpK1PjBkzMVH0trxzq22pv0jqnPX8Ixt5rDJuyraDMabQy4fzb9qauqKMKKq+s4FXa0N+pUmV2AGrGddeW\/c9pQUT9sebqVb64WgncyBZWOG16T8LqL9Kj1LY355tLWhKaMiGPtUOufb\/0QdKw\/u9w9UKn+cfauP\/k33sJcC87Zdz7vr9GmrFYgZ3\/x\/48YuU18NfeEbX21Cay8fzfyPlv4J0AUy2mPwVfcsvksr6C1bV\/ciP\/MiP\/MiP\/MiP\/MiP\/Mgp+Q+9BTszP\/NePQAAAABJRU5ErkJggg==\">"}]}
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>
I am picking up checkbox Data from Controller file, but it is not rendering properly. Following is my html:
HTML:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="x in People">
<input type="checkbox" id="{{x.id}}" >{{x.name}}<br/>
</tr>
</table>
<button>Click</button>
<script>
//Module Declaration
var app = angular.module('myApp',[]);
//Controller Declaration
app.controller('myCtrl',function($scope){
$scope.People = [
{name:"Peter",id:"201"},
{name:"Lina",id:"202"},
{name:"Roger",id:"203"}
];
});
</script>
</body>
</html>
Expectation:
3 rows of input checkboxes with names adjescent to them
Result:
There are no JS Errors. Can someone help me out what is wrong in this?
Just add a "td" tag : JSFIDDLE
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="x in People">
<td>
<input type="checkbox" id="{{x.id}}" >{{x.name}}<br/>
</td>
</tr>
</table>
<button>Click</button>
<script>
//Module Declaration
var app = angular.module('myApp',[]);
//Controller Declaration
app.controller('myCtrl',function($scope){
$scope.People = [
{name:"Peter",id:"201"},
{name:"Lina",id:"202"},
{name:"Roger",id:"203"}
];
});
</script>
</body>
</html>
I apply FineUploader to an element, then clone it. The new element will open the file upload dialog, but won't upload a file. How can this be accomplished?
http://jsfiddle.net/o4z7mtrd/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
<!-- <script src="/lib/plugins_3rd/fine-uploader-5.2.1/fine-uploader.js" type="text/javascript"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/file-uploader/3.7.0/fineuploader.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#mytable').find('tr div.upload').each(function(i,v){
console.log(this)
new qq.FineUploaderBasic({
button: this,
request: {
endpoint: 'update.php'
},
});
});
$('#add').click(function(){
$('#clone').clone(true).removeAttr('id').appendTo('#mytable');
});
});
</script>
<style type="text/css">
#clone {display:none;}
</style>
</head>
<body>
<table id="mytable">
<tr id="clone">
<td class="proposal-td">
<div class="upload" title="Upload">
<img src="/lib/templates/back/images/upload.png" alt="Upload">
</div>
</td>
</tr>
<tr>
<td class="proposal-td">
<div class="upload" title="Upload">
<img src="/lib/templates/back/images/upload.png" alt="Upload">
</div>
</td>
</tr>
</table>
<button id="add">Add new</button>
</body>
</html>
The cloned element needs to be binded to the file upload button since this refers to that specific element only. You also don't need to have duplicated HTML code. See this working example.
HTML
<table id="mytable">
<tr class="row">
<td class="proposal-td">
<div class="upload" title="Upload">Upload</div>
</td>
</tr>
</table>
<button id="add">Add new</button>
JS
function bindUploader($element) {
new qq.FineUploaderBasic({
button: $element[0],
request: {
endpoint: '/echo/json/'
},
callbacks: {
onUpload: function (id, name) {
alert('uploaded');
}
}
});
return $element;
}
$(function () {
bindUploader($('#mytable').find('.upload'));
var $row = $('#mytable .row').clone(true);
$('#add').click(function () {
var $clone = $row.clone(true);
bindUploader($clone.find('.upload'));
$clone.appendTo('#mytable');
});
});
http://jsfiddle.net/moogs/o4z7mtrd/5/