示例:
<!DOCTYPE html> <html ng-app="MyApp"> <head> <title>Study 4</title> <script type="text/javascript" src="js/angular.js"></script> </head> <body> <div ng-controller="testController"> <h1>{{model.newTitle}}</h1> Name:<input type="text" ng-model="model.name" /> Fraction:<input type="text" ng-model="model.fraction" /> <input type="button" ng-click="add(model.fraction)" value="Add" /> <ul> <li ng-repeat="item in model.options"> <b>{{$index+1}}</b> <input type="text" ng-model="item.content" value="item.content" /> <a href="javascript:void(0)" ng-click="del($index)">Delete</a> </li> </ul> <hr /> <div> <h1>{{model.previewTitle}}</h1> <b>{{model.name}}</b>({{model.fraction}}) <ul> <li ng-repeat="item in model.options"> <b>{{$index + 1}}</b> <input type="radio" name="rdCheck" /> {{item.content}} </li> </ul> </div> </div> <script type="text/javascript"> var app = angular.module("MyApp", [], function() { }); var myModel = { newTitle: "Title", previewTitle: "Preview Title", name: "Robin", fraction: "100", options: [] }; app.controller("testController", function($scope) { $scope.model = myModel; $scope.add = function(text) { var obj = { content: text }; $scope.model.options.push(obj); }; $scope.del = function(index) { $scope.model.options.splice(index, 1); }; }); </script> </body> </html>