Angularjs $scope function fix?

Question

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

    }
    }

});

What happens when you remove your 2 ng-change, your ng-checked, your itemType function, your hidebook variable, and when you use ng-if="value == 'book'" instead of ng-hide="hidedvd", and ng-if="value == 'dvd'" instead of ng-hide="hidebook"? — JB Nizet
– JB Nizet, Commented Nov 8, 2018 at 7:32

Nitheesh Chandran · Accepted Answer · 2018-11-08 08:03:41Z

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>

Immanuel Kirubaharan · Accepted Answer · 2018-11-08 07:38:09Z

0

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 Nov 8, 2018 at 7:38

Immanuel Kirubaharan

1,1041 gold badge11 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angularjs $scope function fix?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related