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>

控制器：

App.controller（'amenitiesController'，['$ scope'，'$ http'，函数（$ 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-true-value和ng-false-value添加到复选框。

请查看此链接Checkbox

Answer 2

您可以按如下方式使用“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>

<强> 控制器：

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

DEMO ：http://jsfiddle.net/Chofoteddy/8bzbD/

Angularjs - 取消选中复选框时如何返回上一个状态

2 个答案: