表单功能在ng-if中丢失

Question

我有一个带有复选框的简单表单，该复选框单击该复选框从对象中删除一个属性。

这里是控制器：

app.controller('PropController', function ($scope) {
    var str = '{"meta":{"aprop":"lprop"},"props":{"gprop":12,"lprop":9,"wrop":5}}';
    $scope.filecontent = JSON.parse(str);
    $scope.delprop = false;
    $scope.propobj = $scope.filecontent.props;
    $scope.proptodel = $scope.filecontent.meta.prop;
    var mainvalue = $scope.propobj[$scope.proptodel];     
    $scope.$watch('delprop', function () {
        if ($scope.delprop == true) {
            delete $scope.propobj[$scope.proptodel]; 
        } else {
            $scope.propobj[$scope.proptodel] = mainvalue;
        }
    }); 

意见如下：

<div ng-app="SomeProperties" ng-controller="PropController">

<div ng-if="proptodel">
    there is a property to delete: {{proptodel}}
    <form><input type="checkbox" ng-model="delprop"></form>
    filecontent: {{filecontent}}
</div>

<div ng-if="!proptodel">
    there is NO property to delete
</div>

</div>

这个应用程序就在jsfiddle上。

当表单位于ng-if中时，就会出现问题。当您可以在jsfiddle中尝试时，当我从包含表单的div中删除ng-if="proptodel"时，它正常工作。对此的解释是什么？

Answer 1

您需要将delprop放入对象中，以使ng-model正常工作。这意味着您的标记应该具有：

<form><input type="checkbox" ng-model="obj.delprop"></form>

您的Javascript代码应该类似于：

$scope.obj = {
    delprop: false
};

$scope.propobj = $scope.filecontent.props;
$scope.proptodel = $scope.filecontent.meta.prop;
var mainvalue = $scope.propobj[$scope.proptodel];     
$scope.$watch('obj.delprop', function () {
    if ($scope.obj.delprop == true) {
        delete $scope.propobj[$scope.proptodel]; 
    } else {
        $scope.propobj[$scope.proptodel] = mainvalue;
    }
}); 

当然，您应该为对象找到一个合适的名称，因为obj是非常糟糕和通用的;-)