Question

这是一小段代码，我试图根据json的“type”键呈现我选择的HTML。不幸的是，我没有看到执行代码时出现任何错误，也没有获得所需的HTML。

我是Angular的新手

<html>
<head>
<title></title>
</head>
<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<body> 

<script>
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
$scope.GenerateTable = function () {
$scope.Customers = [
{type:'email', name:'email',value:'',placeholder:"Your email here",required:true},
{type:'text', name:'password',value:'',placeholder:"Your password here",required:true},
{type:'number', name:'firstname',value:'',placeholder:"Your firstname here",required:false,min:"10",max:"100"},
               ];
$scope.IsVisible = true;
        };
    });
</script>
<div ng-app="MyApp" ng-controller="MyController">
<input type="button" value="Generate Table" ng-click="GenerateTable()" />
    <hr />
    <div ng-repeat="m in customers">
    <div ng-switch="m.type">
    <div ng-switch-when="text">
        <h1>Hello</h1>
        <p>Hello World.</p>
</div>
</div>
</div>
</div>
</body>
</html>

Answer 1

我希望它会对你有所帮助。

    <html>
   <head>
      <title></title>
   </head>
   <script 
      src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
   <body>
      <script>
         var app = angular.module('MyApp', [])
         app.controller('MyController', function ($scope) {
            $scope.GenerateTable = function () {
                $scope.Customers = [
                    {type:'email', name:'email',value:'',placeholder:"Your email here",required:true},
                    {type:'text', name:'password',value:'',placeholder:"Your password here",required:true},
                    {type:'number', name:'firstname',value:'',placeholder:"Your firstname here",required:false,min:"10",max:"100"},
                        ];
                $scope.IsVisible = true;
                 };
            });
      </script>
      <div ng-app="MyApp" ng-controller="MyController">
         <input type="button" value="Generate Table" ng-click="GenerateTable()" />
         <hr />
         <div ng-repeat="m in Customers">
            <div><input type="{{m.type}}" value="{{m.Name}}" placeholder="{{m.placeholder}}" required="{{m.required}}" /></div>
         </div>
      </div>
   </body>
</html>

将$ scope变量暴露给ng-switch

1 个答案: