Angular学习（4）- 数组双向梆定

示例：

<!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>

 

posted @ 2014-03-28 15:11  横渡  阅读(2365)  评论(0)  编辑  收藏  举报