CODEWITHSUNDEEP
javascriptangularjs
neptune
neptune

Reputation: 1261

Form functionality lost in ng-if

I have a simple form with a checkbox which clicked deletes a property from an object.

Here is the controller:

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

And the view:

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

The app on jsfiddle.

The problem appears when the form is in the ng-if, it stops behaving. As you can try it in the jsfiddle, when I delete ng-if="proptodel" from the div containing the form, it working normally. What is the explanation of this?

Upvotes: 2

Views: 56

Answers (1)

sebbo
sebbo

Reputation: 2939

You need to put the delprop into in object to make ng-model work properly. That means your markup should have: 

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

And your Javascript code should look like:

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

Of course you should find a proper name for the object as obj is really bad and generic ;-)

Upvotes: 2

Related Questions