AngularJS, ng-show don't work when boolean changes value

user2925894 picture user2925894 · Jan 16, 2014 · Viewed 7.6k times · Source

HTML page in AngularJS. My ng-show won't show div when boolean is set true.

This is my HTML file:

<div class="container">
<div ng-if="!query" ng-hide="editBoolean">
    <h3>{{article.id}} - {{article.title}}</h3>
    <h4 ng-bind-html="article.text"></h4>
    <button ng-click="edit(true)">Endre tekst</button>
</div>

<div ng-show="editBoolean">

    <style>
    .ta-editor { 
        min-height: 300px; 
        height: auto; 
        overflow: auto; 
        font-family: inherit; 
        font-size: 100%; 
    } 
    </style> 

    <input type="text" ng-model="article.title" value="{{article.title}}">

    <div text-angular="text-angular" ng-model="article.text"></div>
    <button ng-click="update(article.text, article.title)">Lagre</button>
    <button ng-click="edit(false)">Avbryt</button>

</div>

<div ng-if="query">
    <h3>{{query}}</h3>
</div>  

This is my controller.js file:

 // Article controller
wikiControllers.controller('articleController', ['$scope', 'articleService',     '$routeParams', '$sanitize', 
  function($scope, articleService, $routeParams, $sanitize){
$scope.editBoolean = false;
$scope.edit = function(editValue){
  this.editBoolean = editValue;
  console.log(this.editBoolean);
};
  }]);

When i have console.log my booleanfil, it shows true(The value is changed)

Answer

michael picture michael · Jan 16, 2014

this:

this.editBoolean = editValue;

should be:

$scope.editBoolean = editValue;