CODEWITHSUNDEEP
javascripthtmlangularjs
Oscar Yuandinata
Oscar Yuandinata

Reputation: 1035

access template element from angular controller

I have a html template like this

<div class="row form-field" ng-show="specialRequestShown" id="specialRequests">
            <div>
                <label><input type="checkbox" class="needsclick"> Non-smoking Room</label>
            </div>
            <div>
                <label><input type="checkbox" class="needsclick"> Late Check-in</label>
            </div>
            <div>
                <label><input type="checkbox" class="needsclick"> Early Check-in</label>
            </div>
            <div>
                <label><input type="checkbox" class="needsclick"> Twin Bed</label>
            </div>
            <div>
                <label><input type="checkbox" class="needsclick"> Large Bed</label>
            </div>
            <div>
                <label><input type="checkbox" class="needsclick"> Extra Bed</label>
            </div>
            <div>
                <label><input type="checkbox" class="needsclick"> Airport Transfer</label>
            </div>
        </div>

        <button type="submit" class="btn btn-default gi-btn-next" ng-click="goToPayment()">
            Lanjutkan
        </button>
</div>

Question: In the function goToPayment(), how can I which checkboxes checked in div specialRequests without having to assign ng-model to each one of them? Function goToPayment() is located in the controller. Is there anyway to loop through the div specialRequests children?

Upvotes: 1

Views: 968

Answers (1)

Vinay K
Vinay K

Reputation: 5572

Try any of these:

$scope.goToPayment = function () {
    var checkedItems = document.querySelectorAll('#specialRequests input:checked')
}

OR

Inject $element into your controller:

$scope.goToPayment = function () {
    var checkedItems = $element[0].querySelectorAll('input:checked')
}

Upvotes: 3

Related Questions