如何在html表格中使用角度材质的单选按钮

我想使用AngularJS材质作为我的前端框架，目前我只有一个带三个文本输入字段和一个单选按钮组的简单表单。在我添加角材料之前，所有的工作，现在只有文本输入提交。如何在html表格中使用角度材质的单选按钮

和我app.js

var app = angular.module('nameApp', ['ngMaterial', 'ngMessages']); 

app.controller('ToolbarController', function($scope) { 
    $scope.title = 'Enter your name!'; 
});

来源

2016-09-06 Job Cuppen

你的标记是好的 - https://codepen.io/camden-kid/pen/zKxZLO。点击“设置”按钮，检查你的CSS和JS是否符合所显示的内容。 –

我只缺少svg-assests-cache和ngDialog，但这些似乎不重要。甚至在添加它们之后它仍然不起作用 –

控制台中是否有任何错误？ –

尝试是这样的;）（运行的代码片段）

在你的情况下，通过NG更换NG-模型= 'data.group1' -model = 'project.group1'，所有NG-消息由NG-消息= 'projectForm.nameInput。$错误'

<html lang="en"> 
 

 
<head> 
 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script> 
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
    <script language="javascript"> 
 
     angular 
 
      .module('firstApplication', ['ngAnimate', 'ngAria', 'ngMaterial', 'ngMessages']) 
 
      .controller('myController', function($scope) { 
 
       $scope.submit = function(obj) { 
 
        // submit code goes here 
 
        console.log(obj); 
 
       }; 
 
      }); 
 
    </script> 
 
</head> 
 

 
<body ng-app="firstApplication"> 
 

 
    <form name="myForm" ng-app="myApp" ng-controller="myController" class="container-fluid" ng-submit="submit(obj)"> 
 
     <div class="row"> 
 
      <div class="col-xs-8"> 
 
       <md-input-container> 
 
        <label>First Name</label> 
 
        <input name="firstName" id="firstName" ng-model="obj.firstName" ng-required="true"> 
 
        <div ng-messages="myForm.firstName.$error"> 
 
         <div ng-message="required">This is required</div> 
 
        </div> 
 
       </md-input-container> 
 
      </div> 
 
      <div class="col-xs-8"> 
 
       <md-input-container> 
 
        <label>Name</label> 
 
        <input name="lastName" id="lastName" ng-model="obj.lastName" ng-required="true"> 
 
        <div ng-messages="myForm.lastName.$error"> 
 
         <div ng-message="required">This is required</div> 
 
        </div> 
 
       </md-input-container> 
 
      </div> 
 
    
 
      <div class="col-xs-8"> 
 
       <md-input-container> 
 
        <md-radio-group name="gender" id="gender" ng-model="obj.gender" ng-required="true" class=""> 
 
         <md-radio-button name="gender" value="Male" required> Male</md-radio-button><br> 
 
      <md-radio-button name="gender" value="Female" required> Female</md-radio-button> 
 
        </md-radio-group> 
 
        <div ng-messages="myForm.gender.$error"> 
 
         <div ng-message="required">This is required</div> 
 
        </div> 
 
       </md-input-container> 
 
      </div> 
 
     </div> 
 
     <div class="col-xs-8"> 
 
       <md-input-container> 
 
        <label>Region</label> 
 
        <input name="region" id="region" ng-model="obj.region" ng-required="true"> 
 
        <div ng-messages="myForm.region.$error"> 
 
         <div ng-message="required">This is required</div> 
 
        </div> 
 
       </md-input-container> 
 
      </div> 
 
     <md-button class="md-primary" type="submit" ng-disabled="myForm.$invalid">SUBMIT</md-button> 
 
    </form> 
 
</body> 
 

 
</html>

来源

2016-09-16 12:09:07

非常感谢你，这似乎是完美的工作！ –

如何在html表格中使用角度材质的单选按钮

回答

相关问题