javascript - Angularjs - 如何在取消选中复选框时返回到以前的状态

Question

我是angularjs的新手

HTML 文件:

<div class='col-md-2 searchdisplay-col1' ng-controller="amenitiesController" style="margin-top:20px">
    <h4>Amenities</h4>
    <label ng-repeat="facilityName in facilityNames" style="display:block;">
        <input
            type="checkbox"
            name="{{facilityName.name}}"
            value="{{facilityName.id}}"
            ng-checked=""
            ng-click="lodgeFilter($event,facilityName.id)"
        /> {{facilityName.name}}
    </label>
</div>

Controller :

App.controller('amenitiesController',['$scope','$http', function($scope,$http){

    $scope.facilityNames = []; // Initialize array for checkboxes

    $http({method: 'GET', url: "/api/facilities.json"})
        .success(function(data, status) {

            $.each(data, function(i,f) {
                $scope.facilityNames.push({ name: f.facility.name, id: f.facility.id });
            });

        })
        .error(function(data, status) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
        });

    $scope.lodgeFilter = function($event, id) {
        html = "";
        $http({method: 'GET', url: "/api/location/"+location_id+".json"})
            .success(function(data, status) {
                //Some Code     
            })
            .error(function(data, status) {
                // called asynchronously if an error occurs
                // or server returns response with an error status.
           });
        $("#results-display").html(html);
    }
}]);

示例 Json

[
    {
        "facility": {
            "id": 1,
            "name": "Internet"
        }
    },
    {
        "facility": {
            "id": 2,
            "name": "Bar"
        }
    }
]

现在当我点击复选框时，我得到了预期的结果。但是当我取消选中它时它仍然处于相同状态，我如何让它进入初始状态？

Answer 1

您可以按如下方式使用“ng-model”(即使对象中不存在键“model”):

HTML:

<label ng-repeat="value in values">
    <input 
        type="checkbox"
        ng-model="value.model"
        ng-change="someFunc($event, value.model, value.id)"
    /> {{value.id}}
</label>

Controller :

function MainCtrl ($scope) {
    $scope.values = [
        {id:1},
        {id:2},
        {id:3}
    ];

    $scope.someFunc = function (event, active, id) {
        if ( active ) {
            alert('Change detected: '+id);
            // HTTP request code
        }
        // Some code
    };
}

演示:http://jsfiddle.net/Chofoteddy/8bzbD/