Question

///当我单击一个单选按钮时，其他单选按钮的详细信息将不可见，反之亦然。但是我的两个单选按钮的详细信息始终可见。 //我的输出始终始终显示hidedvd和hidebook分区。我一次只需要看到一个部分

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>

AngularJS代码。

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;

    }
    }

});

Answer 1

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>

Answer 2

您在我创建的here中的代码plunker link运行良好。请确保您已在代码中添加了ngMaterial脚本，而该代码已在您发布的代码中丢失。

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

AngularJS $ scope函数修复？

2 个答案: