Angularjs - 未选中复选框时如何返回到以前的状态答案

【问题标题】：Angularjs - how to return to previous state when a checkbox is uncheckedAngularjs - 未选中复选框时如何返回到以前的状态
【发布时间】：2014-05-08 14:21:48
【问题描述】：

我是 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', 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"
        }
    }
]

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

【问题讨论】：

使用ng-model + ng-true-value & ng-false-value 将一些数据绑定到您的复选框，并在您的lodgeFilter 函数中观察该特定模型属性。通过这种方式，您将能够检测复选框是否已被勾选并采取相应措施。 问你一个问题：你对 DHTML（Javascript + HTML）编程也很陌生吗？
我如何绑定每个复选框，因为它在一个循环中？是的，我对（javascript + Html）很陌生
我无法提供 plunker 代码，因为复选框是从本地 json 数据生成的，并且它没有托管在任何服务器上。

标签： javascript jquery ajax angularjs checkbox

【解决方案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>

控制器：

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/

【讨论】：

等等 ng-change = "someFunc()" 即。检查后，我从 json 获得结果。现在取消选中，我必须回到初始状态。该怎么做？
@Arun 我添加了一个验证，您可以使用。
确实，这是处理应用程序逻辑的简单方法

【解决方案2】：

您可能需要为您的自定义值添加ng-true-value 和ng-false-value 到复选框。

看看这个链接Checkbox

【讨论】：

是的，我通过了它，但我很困惑如何分配它，因为复选框处于循环状态并且我从 json 数据生成它
能否提供一个示例 json 数据。
jsfiddle.net/shivaraj/UP6LY 。通过那个小提琴，告诉我这就是你想要的。
在您的 JSON 中，之前的值是什么？是未经检查的值吗？
当我点击复选框时，新的html代码是根据json数据动态生成的，所以当我取消选中它时，应该会生成旧的html代码。