<!doctype html> <html ng-app="app"> <head> <title></title> <script type="text/javascript" src="angular.min.js"></script> <style type="text/css"> *{margin: 0;padding:0;} </style> </head> <body ng-controller="mytest"> <div class="" ng-repeat="d in data"> <p>{{d.title}}</p> <ul> <li ng-repeat="f in d.options"> <label><input type="radio" />{{f.title}}</label> </li> </ul> </div> <button ng-click="submit()">提交</button> <script> var app = angular.module("app",[]); app.controller("mytest",function($scope){ $scope.submit = function () { //do something }; $scope.data = [ { "title" : "你最喜欢吃什么水果?", "options" : [ { "id" : 1, "title" : "苹果" }, { "id" : 2, "title" : "橙子" }, { "id" : 3, "title" : "西瓜" } ] }, { "title" : "你最喜欢玩什么游戏?", "options" : [ { "id" : 1, "title" : "LOL" }, { "id" : 2, "title" : "魔兽世界" }, { "id" : 3, "title" : "传奇" } ] } ]; }); </script> </body> </html>
怎么让选择了单选框之后,点击提交按钮打印出 单选框(radio)的值啊?$scope.data的数据都是从后台取得。这里是写死 作演示,
参考这个
<-- index.html --> <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="bootstrap.min.css"> <style> body{ padding-top:50px; } form{ margin-bottom:50px; } </style> <script type="text/javascript" src="angular.min.js"></script> </head> <body ng-app="formApp" ng-controller="formController"> <div class="col-xs-12 col-sm-10 col-sm-offset-1"> <h2>Sample Form Object</h2> <pre> {{ formData }} </pre> <label>Chicken or the Egg?</label> <div class="form-group"> <div class="radio"> <label> <input type="radio" name="chickenEgg" value="chicken" ng-model="formData.chickenEgg">Chicken </label> </div> <div class="radio"> <label> <input type="radio" name="chickenEgg" value="egg" ng-model="formData.chickenEgg">Egg </label> </div> </div> </div> </body> </html> <script> var formApp = angular.module('formApp', []) .controller('formController', function($scope) { //$scope.formData = {}; }); </script>
其实很简单的,你自己想复杂了:只要使用ng-model就可以获取到。请看例子:
<!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/1.2.25/angular.min.js"></script> <script src="script.js"></script> </head> <body> <div ng-controller="Controller"> <form novalidate class="simple-form"> Name: <input type="text" ng-model="user.name" /><br /> E-mail: <input type="email" ng-model="user.email" /><br /> Gender: <input type="radio" ng-model="user.gender" value="male" />male <input type="radio" ng-model="user.gender" value="female" />female<br /> <button ng-click="reset()">RESET</button> <button ng-click="update(user)">SAVE</button> </form> <pre>form = </pre> <pre>master = </pre> </div> </body> </html>
下面是脚本,比较简单,就不解释了,多看看例子就好了:
function Controller($scope) { $scope.master = {}; $scope.update = function(user) { $scope.master = angular.copy(user); }; $scope.reset = function() { $scope.user = angular.copy($scope.master); }; $scope.reset(); }
效果图:
你这个具体是怎么做的啊,我也遇到这个问题了,有时间能加下qq吗
@一介匹夫: 就是双向绑定
双向绑定的概念