Question

我正在尝试做的是，当第三个（分钟）数组被激活时，只有一个按钮在被点击时添加clicked类。因此，如果单击另一个分钟输入按钮，则前一个按钮删除了clicked类，并且新按钮添加了clicked类。

这是我的html文件，其中包含ng-repeat的嵌套组：

<div ng-controller="MyController as datehours">
    <div ng-repeat="d in DaysArray" ng-class="{ active: datehours.isSelected('d.Name') }">
        <input sibs2 type="button" id="radio{{d.Id}}" name="radios" value="{{d.Value}}" ng-click="datehours.selectTab(d.Name,d.Day, d.Value)" />
    </div>

    <!-- Once a day above is selected, the hours div below shows: -->
    <div data-ng-show="showHours()">

        <!-- The div container below shows if Tuesday is selected -->
        <div ng-show="datehours.isSelected('tuesHours')">

            <!-- If Tuesday (above) is selected, the hours for Tuesday are output. -->
            <div ng-repeat="h in TuesdayHoursArray">
                <center>
                    <input sibs3 type="button" id="radio{{h.Id}}" value="{{h.Name}}" ng-click="hourSelected(h.Time, h.Range)" />
                </center>
            </div>

            <!-- Whichever hour is selected above, shows the three input options below for that hour. -->
            <div ng-repeat="h in TuesdayHoursArray" ng-show="isSet(h.Range)">
                <div>
                    <input ng-class="{ clicked: clickedFlag1 == $index }" type="button" id="minuteradio{{h.Id}}{{h.Time}}{{h.Range}}" value=":00" ng-click="minuteSelected(0, $index)" />
                </div>
                <div>
                    <input ng-class="{ clicked: clickedFlag2 == $index }" type="button" id="minuteradio{{h.Id}}{{h.Time}}{{h.Range}}" value=":15" ng-click="minuteSelected(15, $index)" />
                </div>
                <div>
                    <input ng-class="{ clicked: clickedFlag3 == $index }" type="button" id="minuteradio{{h.Id}}{{h.Time}}{{h.Range}}" value=":30" ng-click="minuteSelected(30, $index)" />
                </div>
            </div>
        </div>

        <!-- The next div is shows if Wednesday is selected from 'DaysArray' -->
        <div ng-show="datehours.isSelected('wedHours')">

            <div ng-repeat="h in WednesdayHoursArray">
                <center>
                    <input sibs3 type="button" id="radio{{h.Id}}" value="{{h.Name}}" ng-click="hourSelected(h.Time, h.Range, h.Range)" />
                </center>
            </div>

            <div ng-repeat="h in WednesdayHoursArray" ng-show="isSet(h.Range)">
                <div>
                    <input ng-class="{ clicked: clickedFlag1 == $index }" type="button" id="minuteradio{{h.Id}}{{h.Time}}{{h.Range}}" value=":00" ng-click="minuteSelected(0, $index)" />
                </div>
                <div>
                    <input ng-class="{ clicked: clickedFlag2 == $index }" type="button" id="minuteradio{{h.Id}}{{h.Time}}{{h.Range}}" value=":15" ng-click="minuteSelected(15, $index)" />
                </div>
                <div>
                    <input ng-class="{ clicked: clickedFlag3 == $index }" type="button" id="minuteradio{{h.Id}}{{h.Time}}{{h.Range}}" value=":30" ng-click="minuteSelected(30, $index)" />
                </div>
            </div>
        </div>
    </div>
</div>

随后是AngularJS控制器：

app.controller('MyController', function ($scope) {

    $scope.DaysArray = [
        { "Id": 16, "Value": "Tuesday", "Name": "tuesHours", "Day": 16 },
        { "Id": 17, "Value": "Wednesday", "Name": "wedHours", "Day": 17 }
    ]

    $scope.TuesdayHoursArray = [
        { "Id": 1, "Time": 1, "Name": "1AM", "Range": 0 },
        { "Id": 2, "Time": 2, "Name": "2AM", "Range": 4 },
        { "Id": 3, "Time": 3, "Name": "3AM", "Range": 8 }
    ]

    $scope.WednesdayHoursArray = [
        { "Id": 4, "Time": 9, "Name": "9AM", "Range": 12 },
        { "Id": 5, "Time": 10, "Name": "10AM", "Range": 16 },
        { "Id": 6, "Time": 11, "Name": "11AM", "Range": 20 }
    ]

    var date = null;
    var hour = null;
    var minute = null;

    // Here the date starts off false to hide the hours arrays.
    $scope.dateIsSelected = false;

    // This determines which date to show hours for
    this.selectTab = function (setTab, newDate) {
        this.tab = setTab;
        $scope.dateIsSelected = true;
        date = newDate;
    };
    // Also tied to selecting which date to show hours for
    this.isSelected = function (checkTab) {
        return this.tab === checkTab;
    };

    // Gets set to true when day is selected and ng-show's hours
    $scope.showHours = function () {
        return $scope.dateIsSelected;
    };

    // Here, the hour that's selected will trigger a tab to be shown for the minutes for that hour.
    $scope.hourSelected = function (hourNumber, Id) {
        hour = hourNumber;
        $scope.tab2 = Id;
    };

    $scope.isSet = function (tabNum) {
        return $scope.tab2 === tabNum;
    };

    // Finally here's is where I need the help.
    $scope.minuteSelected = function (minuteNumber, i) {
        if (minuteNumber == 0) {
            $scope.clickedFlag1 = i;
        }
        if (minuteNumber == 15) {
            $scope.clickedFlag2 = i;
        }
        if (minuteNumber == 30) {
            $scope.clickedFlag3 = i;
        }
        minute = minuteNumber;
    };
}

以防万一需要：

var app = angular.module('myApp', ['ngStorage']);

app.directive('sibs3', function () {
    return {
        link: function (scope, element, attrs) {
            element.bind('click', function () {
                element.parent().parent().parent().parent().children().children().children().children().removeClass('clicked');
                element.parent().parent().parent().children().children().children().removeClass('clicked');
                element.parent().parent().children().children().removeClass('clicked');
                element.addClass('clicked');
            })
        },
    }
});

我面临的问题与每分钟input选项的输入有关。如果我选择小时增量，则分钟显示。我在该小时内选择一分钟增量，并将类clicked添加到该按钮。但是如果我在该小时数组中选择另一个分钟增量按钮，则前一个按钮不会删除clicked类。相反，这两个按钮现在都添加了clicked类。

AngularJS：如何使用嵌套的ng-repeat循环选择的ng-class输入，以便选择单个元素？

0 个答案: