AngularJS переводной стол

Question

AngularJS переводной стол

0

Я работал над побочным проектом, чтобы узнать AngularJS. Я пытаюсь заполнить таблицу значениями, а затем поместить две кнопки для перевода или изменения этих данных. У меня есть таблица с данными, но когда я попытался поместить кнопки для проверки перевода, у них нет никаких значений. Консоль не возвращает ошибок. Это мой первый раз с AngularJS, поэтому, возможно, у моего кода много ошибок.

<!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>

El Hombre Sin Nombre 21 апр. 2016, в 22:45

Источник

0

Хм, у вас не только проблемы с кнопками, ваш абзац также не работает ... но я не вижу проблемы там ... Может быть, попробуйте установить контроллер ng не на вашем теле. И вы можете попробовать использовать {{ "BUTTON_LANG_X | translate }} вместо translate="BUTTON_LANG_X"
kabaehr 21 апр. 2016, в 20:45
0

Есть тест, работает только фильтр. В любом случае я пытался использовать {{"BUTTON_LANG_X | translate}} и не работает. Я думаю, что ошибка - $ scope.changeLanguage, но я не знаю, что с этим происходит.
El Hombre Sin Nombre 21 апр. 2016, в 21:15
0

Вы пытались превзойти метод changeLanguage ?
kabaehr 21 апр. 2016, в 21:18
0

Если я использую возвращаемый объект console.log ($ translate.use (langKey)) ... значит, этот метод работает ...
El Hombre Sin Nombre 21 апр. 2016, в 21:59
0

Console.log $ translateProvider в contexto.config (['$ translateProvider', функция ($ translateProvider) возвращает ноль. Возможно, это ошибка ...
El Hombre Sin Nombre 21 апр. 2016, в 22:35

Показать ещё 3 комментария

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

Хм, у вас не только проблемы с кнопками, ваш абзац также не работает ... но я не вижу проблемы там ... Может быть, попробуйте установить контроллер ng не на вашем теле. И вы можете попробовать использовать {{ "BUTTON_LANG_X | translate }} вместо translate="BUTTON_LANG_X"
Есть тест, работает только фильтр. В любом случае я пытался использовать {{"BUTTON_LANG_X | translate}} и не работает. Я думаю, что ошибка - $ scope.changeLanguage, но я не знаю, что с этим происходит.
Вы пытались превзойти метод changeLanguage ?
Если я использую возвращаемый объект console.log ($ translate.use (langKey)) ... значит, этот метод работает ...
Console.log $ translateProvider в contexto.config (['$ translateProvider', функция ($ translateProvider) возвращает ноль. Возможно, это ошибка ...

Devidas Kadam · Answer 1 · 2016-04-21T18-32-00.000Z

попробуй это

<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>