1

I've got a page in my website in which I want to show a checkbox. I only want to show the checkbox if the model is initially false. So I wrote this (this was my initial code, but it was a simplified version of what I have myself. I updated the code in the snippet at the end of this question to show the problem):

<div ng-if="!the_field">
    <input ng-model="the_field" type="checkbox">
</div>

The problem is that if I click the checkbox, it disappears. That of course makes sense, but I have no idea how to solve this.

So what I basically want is to show the checkbox if the model was false upon rendering the HTML. But after that I want to somehow break the databinding so that the checkbox remains on the page even if the model changes to true.

Does anybody know how I can achieve this? All tips are welcome!

[EDIT] I would prefer doing this from within the template, so that I don't get a double list of these fields (because I've got about 50 of them). Any ideas?

[EDIT 2] Turns out that it did work with the example above, which was a simplified version of my own code. In my own code however, I'm not using simple a field, but an item in a dict. I updated the code above and made a snippet below to show the problem: 

var MainController = function($scope){
    $scope.the_field = {};
    $scope.the_field.item = false;
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-controller="MainController">
  parent: {{the_field.item}}
  <div ng-if="!the_field.item">
    child: {{the_field.item}}<br>
    <input ng-model="the_field.item" type="checkbox">
  </div>
</div>

Improve this question
1
  • Use a directive to do this. You have to use 2 variables Commented Apr 10, 2016 at 12:45

3 Answers 3

Reset to default
1

You can clone the source object. Like this:

angular.module('app', []).
controller('ctrl', function($scope) {
  $scope.the_field = false;
  $scope.the_field_clone = angular.copy($scope.the_field);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  {{the_field}}
  <div ng-if="!the_field_clone">
    <input ng-model="$parent.the_field" type="checkbox">
  </div>
</div>

http://jsbin.com/ditoka/edit?html,js

Update - option 2 - Directive

angular.module('app', []).
controller('ctrl', function($scope) {
  $scope.the_field = false;
}).
directive('customIf', function() {
  return {
    scope: {
      customIf: '='
    },
    link: function(scope, element, attrs) {
      if (!scope.customIf) {
        element.remove();  
      }
    }
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  {{the_field}}
  <div custom-if="!the_field">
    <input ng-model="the_field" type="checkbox">
  </div>
</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks for that, that will indeed work. The problem is however, that I need to do this for about 50 checkboxes. If I would need to do this for all the checkboxes I basically get a double list of my fields, both in the html and in the controller. I would prefer doing it only in the template because that would give me one single spot where the whole list of items is. Otherwise I need to edit in two places if things are removed or added to the list (and they will). Would you know of a way that I can do this only in the template?
1

It works with the code of your question, try it out ;)

(see What are Scopes?)

var MainController = function($scope){
    $scope.the_field = false;
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-controller="MainController">
  parent: {{the_field}}
  <div ng-if="!the_field">
    child: {{the_field}}<br>
    <input ng-model="the_field" type="checkbox">
  </div>
</div>

Improve this answer

1 Comment

Good catch! I simplified the code for my question, but it turns out I simplified it a bit too much. I'm actually not using the_field, but in my own code the_field is a dict containing some items. I added a snippet to my initial question to show what my problem is. Any idea how I can solve that?
0

The answer to your updated question: You can use another property in your model, edited when the first click occurs...

var MainController = function($scope){
    $scope.model = {init: true, the_field: false};
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-controller="MainController">
    parent: {{model.the_field}}
    <div ng-if="!model.the_field || !model.init">
        <input ng-model="model.the_field" type="checkbox" ng-click="model.init=false;">
    </div>
</div>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.