zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Git 基本使用
    vue cli 构建的 webpack 项目设置多页面
    vue父子组件通信
    路由 vue-router
    IE浏览器下 Vue2.x 和 Angular 应用无法打开
    点击组件外使组件隐藏
    vue2.x 随记
    python学习之路 二 :基本数据类型
    python学习之路 一 :编程语言介绍
    .net Timer定时执行
  • 原文地址:https://www.cnblogs.com/HD/p/3630726.html
Copyright © 2011-2022 走看看