Angularjs $scope function fix?

//When i click one radio button the other radio buttons details should not be visible and vice versa. But both my radio buttons details are visible always. //My output always has both hidedvd and hidebook divisions visible at all times. I need only one section to be visible at a time

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Add a Book</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.css">
    <link rel="stylesheet" href="StyleSheet.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-messages.min.js"></script>
    <style>
        p{
            font-weight: bold;

        }
        .form{
           margin: 0 auto; 
           width:250px;
        }

    </style>
 </head>

<body ng-app="wmin_additem" ng-cloak layout-fill>



    <div>
    <form class="form" ng-controller="formCtrl">

        <h1 class="h1">Add a new Item</h1><br><br>
        <input type="radio" name="check" value="dvd"  ng-model="value" ng-checked="true"  ng-change='itemType(value)'>DVD<br>
        <input type="radio" name="check" value="book"  ng-model="value"  ng-change='itemType(value)'>Book<br>
        <fieldset>
        <p>ISBN:<br>
        <input type="text" name="ISBN" ng-model="itemInput1" tabindex="1" required autofocus><br>
        Title:<br>
        <input type="text" name="Title" ng-model="itemInput2" tabindex="2" required><br>
        </p>
        </fieldset>

        <div ng-hide="hidedvd">   
        <fieldset>
        <p>Sector:<br> 
        <input type="text" name="Sector" ng-model="itemInput3" tabindex="3"><br>
        Publication Date:<br>
        <input type="text" name="Published" ng-model="itemInput4" tabindex="4"><br>
        Authors:<br> 
        <input type="text" name="Authors" ng-model="itemInput5" tabindex="5"><br>
        Publishers:<br> 
        <input type="text" name="Publishers" ng-model="itemInput6" tabindex="6"><br>
        Page Count:<br> 
        <input type="text" name="Pages" ng-model="itemInput7" tabindex="7"><br></p>
        </fieldset>
        </div>

        <div ng-hide="hidebook">
        <fieldset>
        <p>Sector:<br> 
        <input type="text" name="Sector" ng-model="itemInput8" tabindex="3"><br>
        Languages:<br>
        <input type="text" name="Languages" ng-model="itemInput9" tabindex="4"><br>
        Subtitles:<br> 
        <input type="text" name="Subtitles" ng-model="itemInput10" tabindex="5"><br>
        Producers:<br> 
        <input type="text" name="Producers" ng-model="itemInput11" tabindex="6"><br>
        Actors:<br> 
        <input type="text" name="Actors" ng-model="itemInput12" tabindex="7"><br></p>
        </fieldset>
        </div>


        <input class="submit-button" type="submit" name="AddBook" value="Add" />

    </form>
    </div>
    <script src="additem.js"></script>

</body>
</html>

The AngularJS code.

var app = angular.module('wmin_additem', ['ngMaterial']);
app.controller('formCtrl', function($scope) {

 $scope.hidebook = true;

 $scope.itemType = function(value) {


       if(value=="book"){

    $scope.hidedvd = true;
    $scope.hidebook = false;

    }else{

    $scope.hidedvd = false;
    $scope.hidebook = true;

    }
    }

});

2 answers

  • answered 2018-11-08 07:38 Immanuel Kirubaharan

    Your code working perfectly here in this plunker link which I have created. Please make sure you have ngMaterial script added into your code which was missing in your posted code.

    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js"></script>
    

  • answered 2018-11-08 07:56 Nitheesh Chandran

    Controller.js

     $scope.bookShow = false; 
     $scope.itemType = function(value) {   
    
     if(value=="book"){
        $scope.bookShow=true;
     }
     else {
        $scope.bookShow = false; 
     } 
    }
    

    OR

     $scope.bookShow = false; 
     $scope.itemType = function() {   
     $scope.bookShow=!$scope.bookShow;
    }
    

    HTML

    <form class="form" ng-controller="formCtrl">
    
        <h1 class="h1">Add a new Item</h1><br><br>
        <input type="radio" name="check" value="dvd"  ng-model="value" ng-checked="true"  ng-change='itemType(value)'>DVD<br>
        <input type="radio" name="check" value="book"  ng-model="value"  ng-change='itemType(value)'>Book<br>
        <fieldset>
        <p>ISBN:<br>
        <input type="text" name="ISBN" ng-model="itemInput1" tabindex="1" required autofocus><br>
        Title:<br>
        <input type="text" name="Title" ng-model="itemInput2" tabindex="2" required><br>
        </p>
        </fieldset> 
       //CHANGED HERE
        <div  ng-show=!bookShow>   
        <fieldset>
        <p>Sector DVD:<br> 
        <input type="text" name="Sector" ng-model="itemInput3" tabindex="3"><br>
        Publication Date:<br>
        <input type="text" name="Published" ng-model="itemInput4" tabindex="4"><br>
        Authors:<br> 
        <input type="text" name="Authors" ng-model="itemInput5" tabindex="5"><br>
        Publishers:<br> 
        <input type="text" name="Publishers" ng-model="itemInput6" tabindex="6"><br>
        Page Count:<br> 
        <input type="text" name="Pages" ng-model="itemInput7" tabindex="7"><br></p>
        </fieldset>
        </div>
        //CHANGED HERE
        <div ng-show=bookShow>
        <fieldset>
        <p>Sector BOOK:<br> 
        <input type="text" name="Sector" ng-model="itemInput8" tabindex="3"><br>
        Languages:<br>
        <input type="text" name="Languages" ng-model="itemInput9" tabindex="4"><br>
        Subtitles:<br> 
        <input type="text" name="Subtitles" ng-model="itemInput10" tabindex="5"><br>
        Producers:<br> 
        <input type="text" name="Producers" ng-model="itemInput11" tabindex="6"><br>
        Actors:<br> 
        <input type="text" name="Actors" ng-model="itemInput12" tabindex="7"><br></p>
        </fieldset>
        </div>
    
    
        <input class="submit-button" type="submit" name="AddBook" value="Add" />
    
    </form>