zoukankan      html  css  js  c++  java
  • Angular学习(5)- 数组双向梆定+filter

    示例:

    <!DOCTYPE html>
    <html ng-app="MyApp">
    <head>
        <title>Study 5</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" />
            Type:<select ng-model="model.type"><option value="1" selected>Radio</option><option value="2">CheckBox</option></select>
            <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.type | typeFilter}}]{{model.name}}</b>({{model.fraction}})
                <ul>
                    <li ng-repeat="item in model.options">
                        <b>{{$index + 1}}</b>
                        <input type="radio" name="optcheck" ng-show="model.type==1" />
                        <input type="checkbox" ng-show="model.type==2" />
                        {{item.content}}
                    </li>
                </ul>
            </div>
            <hr />
            {{nowTime | date : "yyyy-MM-dd HH:mm:ss"}}
        </div>
        <script type="text/javascript">
            var app = angular.module("MyApp", [], function() { });
            var myModel = {
                newTitle: "Title",
                previewTitle: "Preview Title",
                name: "Robin",
                fraction: "100",
                type : 1,
                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);
                };
                $scope.nowTime = new Date();
            });
            app.filter("typeFilter", function() {
                var func = function(value) {
                    return value == 1 ? "Single Select" : "Multi Select";
                };
                return func;
            });
        </script>
    </body>
    </html>
  • 相关阅读:
    OC NSSet
    iOS 杂笔-23(区分各种空值)
    OC NSNumber NSValue
    OC NSArray 数组
    OC NSString(字符串)
    OC 内存管理
    OC 动态类型,动态绑定,动态加载
    OC 多态
    微信小程序开发5-WXML
    微信小程序开发4-JSON
  • 原文地址:https://www.cnblogs.com/HD/p/3630729.html
Copyright © 2011-2022 走看看