Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Michael Ross
Michael Ross
11,204 Points
Posted by Michael Ross
Michael Ross
11,204 Points

ng-hide doesn't appear to work

I am currently going through the Angular basics course and I am trying to apply the ng-hide to the label element. The label element doesn't appear to hide even though I'm changing the editing property to true and false using ng-click on the editing link. 

<!doctype html>
<html lang="en">
<head>
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <link href='styles/main.css' rel='stylesheet' type="text/css">
</head>
<body ng-app="todoListApp">
   <h1>My TODOs</h1>
<div ng-controller="mainCtrl" class="list">
  <input ng-model="todo.completed" type="checkbox"/>
  <label ng-hide="editing" class="editing-label">{{todo.name}}</label>
  <input ng-model="todo.name" class="editing-label" type="text"/> 
  <div class="actions" ng-controller="coolCtrl">
    <a href="" ng-click=" editing = !editing">edit</a>
    <a href="" ng-click="helloWorld()">save</a>
    <a href="" class="delete">delete</a>
  </div> 
</div>
  <script src="vendor/angular.js" type="text/javascript"></script>
  <script src="scripts/app.js" type="text/javascript"></script>
</body>
</html>

body {
  color: #2d3339;
  font-family: "Varela Round";
  text-align: center;
  background: #edeff0;
  font-size: 16px; }

a {
  color: #3f8abf;
  text-decoration: none; }
  a:hover {
    color: #65a1cc; }

.list {
  background: #fff;
  width: 80%;
  min-width: 500px;
  margin: 80px auto 0;
  border-top: 40px solid #5a6772;
  text-align: left; }
  .list .item {
    border-bottom: 2px solid #edeff0;
    padding: 17px 0 18px 17px; }
    .list .item label {
      padding-left: 5px;
      cursor: pointer; }
    .list .item .editing-label {
      margin-left: 5px;
      font-family: "Varela Round";
      border-radius: 2px;
      border: 2px solid #a7b9c4;
      font-size: 16px;
      padding: 15px 0 15px 10px;
      width: 60%; }
    .list .item .actions {
      float: right;
      margin-right: 20px; }
      .list .item .actions .delete {
        color: #ed5a5a;
        margin-left: 10px; }
        .list .item .actions .delete:hover {
          color: #f28888; }
    .list .item.editing .actions {
      margin-top: 17px; }
  .list .edited label:after {
    content: " edited";
    text-transform: uppercase;
    color: #a7b9c4;
    font-size: 14px;
    padding-left: 5px; }
  .list .completed label {
    color: #a7b9c4;
    text-decoration: line-through; }
  .list .add {
    padding: 25px 0 27px 25px; }

/*input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(checkbox-empty.svg) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + span {
    background:url(checkbox-filled.svg) left top no-repeat;
}*/

angular.module("todoListApp", [])
.controller('mainCtrl', function($scope){
  $scope.helloWorld = function() {
    console.log("This is the hello world controller function in the main controller!");
  };
})
.controller('coolCtrl', function($scope){
  $scope.whoAmI = function(){
    console.log("This is the who am I controller function within the cool controller!");
  };

  $scope.helloWorld = function() {
    console.log("This is not the main controller!");
  }
});

2 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Try adding one more ng-click directive to your label.

I'm not 100% on this by any means but I believe it needs 1 more ng-click on the action to drive the hide effect.

<label ng-hide="editing" class="editing-label" ng-click="helloWorld()"> {{ todo.name }}</label>
Michael Ross
Michael Ross
11,204 Points
Michael Ross
Michael Ross
11,204 Points

I've realised the mistake I've made. I had been using the same workspace to follow along from the previous videos where I had been using the ng-controller="coolCtrl" as a child scope. The editing property was being changed but was relevant to the child scope. I believe the ng-hide & ng-show where within the scope of the mainCtrl, the parent scope, which meant there was two 'editing' properties apparent, one for the parent and one for the child. When I removed that coolCtrl directive from the HTML it appears to work fine.