Доступ к Angularjs

0

Я новичок в angularjs и все еще изучаю все концепции, когда я иду. Я работаю над личным проектом, который будет использовать angularjs для получения данных json и отображения его на HTML-странице переднего конца.

После того, как страница отображается в HTML, есть два столбца, называемые правилами и именем сервера, которые имеют поле ввода флажка. То, что я пытаюсь сделать, - это щелкнуть галочкой, он создаст истинную или ложную переменную, основанную на этом атрибуте check = !check. Я хотел бы получить доступ к тем объектам, которые создаются внутри области ngRepeat. Я не уверен, как я могу добиться этого с помощью AngularJS. Я знаю, что могу с JQuery, но я пытаюсь понять это с помощью AJS.

Любая помощь, которая поможет мне в правильном направлении, поможет много. :)

Ниже мой код, и вот моя ссылка JSFiddle.

Угловой код JS:

angular.module('ucmgmt', [])
    .controller('appsCtrl', function ($scope) {
    $scope.data = {
        "applications": [{
            "appname": "maps",
                "sitename": "maps.example.com",
                "rules": [
                "External_Under_Construction",
                "Internal_Under_Construction"]
        }, {
            "appname": "bing",
                "sitename": "bing.example.com",
                "rules": [
                "Bing_Under_Construction"]
        }]
    };
    $scope.process = function ($index) {
        console.log("item is checked." + $index);
    };
})

Код HTML

<div ng-app="ucmgmt">
    <div ng-controller="appsCtrl">
        <table class="tg">
            <tr>
                <th class="tg-031e">Appname</th>
                <th class="tg-yw4l">Sitename</th>
                <th class="tg-yw4l">Rule</th>
                <th class="tg-yw4l">ServerName</th>
                <th class="tg-yw4l">Status</th>
            </tr>
            <tbody ng-repeat="item in data">
                <tr ng-repeat="app in item">
                    <td class="tg-yw4l">{{app.appname}}</td>
                    <td class="tg-yw4l">{{app.sitename}}</td>
                    <td class="tg-yw4l">
                        <ul>
                            <li ng-repeat="rule in app.rules">
                                <input ng-click="check = !check" type="checkbox" value="{{rule}}">{{rule}}</li>
                        </ul>
                    </td>
                    <td class="tg-yw4l">
                        <ul>
                            <li>
                                <input ng-click="check = !check; process($index)" type="checkbox" value="SERVER1">SERVER1</li>
                            <li>
                                <input ng-click="check = !check" type="checkbox" value="SERVER2">SERVER2</li>
                        </ul>
                    </td>
                    <td class="tg-yw4l">
                        <ul>
                            <li>NA</li>
                            <li>NA</li>
                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
  • 0
    Внутри вашего ng-repeat у вас есть доступ к элементам, которые вы в данный момент отображаете как переменные "item" и "app". Вы можете передать их в своем процессе (приложение, элемент). Тогда в этой функции у вас будут сами объекты для воздействия.
Теги:

1 ответ

1
Лучший ответ

В угловом режиме, когда вы используете флажки, вы обрабатываете проверенное состояние с помощью ng-модели.

Установите "check" как свойство правила и используйте ng-model на вашем входе:

<li ng-repeat="rule in app.rules">
    <input ng-model="rule.check" type="checkbox"></li>

затем в своем ng-клике вы можете передать фактическое значение приложения и/или правила:

<input ng-model="app.server1.check" ng-click="process(app)" type="checkbox" value="SERVER1">SERVER1</li>

то в вашем контроллере у вас будет доступ к этому свойству следующим образом:

$scope.process = function (app) {
    // access your rules by an index of your repeater
    var ruleChecked = app.rules[index].check; // the check of "index" rule of above repeater
    var serverChecked = app.server1.check; // the value of the "server 1 checkbox"
}

Также вам нужно будет инициализировать переменную server1 внутри каждого из объектов вашего приложения, чтобы сделать эту работу должным образом.

Поделиться
  • 0
    Спасибо @Cyberdelphos за ваш быстрый ответ. Я также пробовал ng-модель ранее, прежде чем начал обсуждение в stackoverflow, но когда я установил флажок, он выдает мне сообщение об ошибке TypeError: Cannot assign to read only property 'check' of External_Under_Construction . ссылка JSFiddle обновлен с помощью ng-модели.
  • 1
    Я вижу ... проблема в том, что вы перебираете массив строк. Измените ваши правила как массив объектов, таких как "rules": [ {name:"External_Under_Construction", check: false}, {name: "Internal_Under_Construction", check: false}]; чтобы инициализировать их как не проверенные. И тогда ваш шаблон {{rule.name}}
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню