javascript - AngularJS translate table -
i been working on sideproject learn angularjs. i´m trying fill table values , put 2 buttons translate or change data. i´ve got table data, when tried put buttons test translation, doesn´t have values. console doesn´t return errors. it´s first time angularjs maybe code have many errors.
<!doctype html> <html lang="es" ng-app="modulo"> <head> <style> body { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } * { font-family: 'roboto', sans-serif; } section { padding: 1%; margin-left: auto; margin-right: auto; position: relative; } footer { position: fixed; left: 0px; bottom: 0px; width: 100%; } .mdl-layout__drawer-button { color: rgb(0, 0, 0) !important; } .mdl-data-table td, .mdl-data-table th { text-align: center !important; } </style> <meta charset="utf-8"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=material+icons"> <link href='https://fonts.googleapis.com/css?family=roboto' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css"> <title>shortcuts intellij</title> </head> <body ng-controller="controlador"> <header> <article class="demo-layout-transparent mdl-layout mdl-js-layout"> <article class="mdl-layout__drawer"> <span class="mdl-layout-title">grupos</span> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="">link</a> <a class="mdl-navigation__link" href="">link</a> <a class="mdl-navigation__link" href="">link</a> <a class="mdl-navigation__link" href="">link</a> </nav> </article> </article> <article class="mdl-layout__header-row"> <article class="mdl-layout-spacer"></article> <nav class="mdl-navigation"> <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1"> <input type="checkbox" id="switch-1" class="mdl-switch__input" checked> <span class="mdl-switch__label"><b>english/spanish</b></span> </label> </nav> </article> </header> <section> <form action="#"> <article class="mdl-textfield mdl-js-textfield mdl-textfield--expandable"> <label class="mdl-button mdl-js-button mdl-button--icon" for="sample6"> <i class="material-icons">search </i> </label> <article class="mdl-textfield__expandable-holder"> <input class="mdl-textfield__input" type="text" id="sample6" ng-model="buscar"> <label class="mdl-textfield__label" for="sample-expandable">search</label> </article> </article> </form> <div> <p translate="variable_replacement"></p> <button ng-click="changelanguage('es')" translate="button_lang_es"></button> <button ng-click="changelanguage('en')" translate="button_lang_en"></button> </div> <table class="mdl-data-table mdl-js-data-table mdl-data-table"> <thead> <tr> <th></th> <th>intellij</th> <th>eclipse</th> <th>descripción</th> </tr> </thead> <tbody> <tr> <td><b>multilinea</b></td> <td></td> <td></td> <td></td> </tr> <tr ng-repeat="multilinea in multilinea | filter: buscar"> <td></td> <td>{{multilinea.intellij}}</td> <td>{{multilinea.eclipse}}</td> <td>{{multilinea.descripcion}}</td> </tr> <tr> <td><b>formato</b></td> <td></td> <td></td> <td></td> </tr> <tr ng-repeat="formato in formato | filter: buscar"> <td></td> <td>{{formato.intellij}}</td> <td>{{formato.eclipse}}</td> <td>{{formato.descripcion}}</td> </tr> </tbody> </table> </section> <footer class="mdl-mini-footer"> <ul class="mdl-mini-footer__link-list"> <li> <a href="https://github.com/elhombresinnombre">asier lara</a></li> <li><a href="https://github.com">github</a></li> </ul> </footer> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.8.1/angular-translate.js"></script> <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script> <script type="text/javascript"> var contexto = angular.module('modulo', ['pascalprecht.translate']); var tabla = contexto.controller("controlador", ['$translate', '$scope', function ($translate, $scope) { var multilinea = [ { intellij: "sout + (tab)" , eclipse: "syso + (ctrl + espacio)" , descripcion: "system.out.println();" }, { intellij: "psvm + (tab)" , eclipse: "main + (ctrl + espacio)" , descripcion: "public static void main (string[] args){ }" } ]; $scope.multilinea = multilinea; var formato = [ { intellij: "(ctrl + alt + t)" , eclipse: "coffee-bytes" , descripcion: "region" }, { intellij: "ctrl + shift + alt + l" , eclipse: "ctrl + shift + f" , descripcion: "auto formatear documento" } ]; $scope.formato = formato; var translationses = { variable_replacement: 'hola' , button_lang_es: 'castellano' , button_lang_en: 'inglés' }; var translationsen = { variable_replacement: 'hi' , button_lang_es: 'spanish' , button_lang_en: 'english' }; contexto.config(['$translateprovider', function ($translateprovider) { $translateprovider.translations('es', translationses); $translateprovider.translations('en', translationsen); $translateprovider.usesanitizevaluestrategy('escapeparameters'); $translateprovider.preferredlanguage('es'); $translateprovider.fallbacklanguage('es'); }]); $scope.changelanguage = function (langkey) { $translate.use(langkey); }; }]); </script> </body> </html>
try this
<tr ng-repeat="(multilineakey, multilineaval) in multilinea | filter: buscar"> <td></td> <td>{{multilineaval.intellij}}</td> <td>{{multilineaval.eclipse}}</td> <td>{{multilineaval.descripcion}}</td> </tr> <tr> <td><b>formato</b></td> <td></td> <td></td> <td></td> </tr> <tr ng-repeat="(formatokey,formatoval) in formato | filter: buscar"> <td></td> <td>{{formatoval.intellij}}</td> <td>{{formatoval.eclipse}}</td> <td>{{formatoval.descripcion}}</td> </tr>
Comments
Post a Comment