• 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>
  • 相关阅读:
    vue事件处理器--v-on
    vue循环-- v-for
    node-Socket编程
    JsonWebToken
    Mongodb 数据库
    Nodejs库-EXPRESS
    yarn和npm的区别
    Vue学习笔记【22】——Vue中的动画(列表的排序过渡)
    Vue学习笔记【21】——Vue中的动画(v-for 的列表过渡)
    Vue学习笔记【20】——Vue中的动画(使用动画钩子函数)
  • 原文地址:https://www.cnblogs.com/HD/p/3630726.html
Copyright © 2020-2023  润新知