angular1.5 与 jquery想结合一个小应用

index.html

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>故障管理列表</title>

    <load href="__PUBLIC__/jquery/jquery-3.1.1.min.js"/>

    <load href="__PUBLIC__/bootstrap/css/bootstrap.min.css"/>

    <load href="__PUBLIC__/js/angular.min.js"/>

    <load href="__PUBLIC__/css/sweetalert.css"/>

    <load href="__PUBLIC__/js/sweetalert.min.js"/>

    <load href="/api/Application/Habo_v2/View/Fault/style.css"/>

    <style>

        .warning {

            background-color: yellow;

        }

    </style>

</head>

<body ng-app="myApp">

<nav class="navbar navbar-inverse" role="navigation">

    <div class="container-fluid">

        <div class="navbar-header">

            <a class="navbar-brand" href="#">demo</a>

        </div>

        <div class="navbar-header">

            <a class="navbar-brand" href="/api/index.php/Habo_v2/Fault/about"> About </a>

        </div>

    </div>

</nav>

<h2>故障记录列表</h2>

<div class="container" ng-controller="faultCtrl">

    <div class="form form-inline">

        <input ng-model="query" type="text" class="form-control" style="width: 50%" placeholder="输入关键词">

        <!--<select ng-model="order" class="form-control" style="width: 10%" placeholder="排序字段" title="排序字段">-->

        <!--<option value="fault_system">fault_system</option>-->

        <!--<option value="fault_name">fault_name</option>-->

        <!--<option value="status">status</option>-->

        <!--<option value="occur_time">occur_time</option>-->

        <!--<option value="discover_time">discover_time</option>-->

        <!--<option value="solve_time">solve_time</option>-->

        <!--<option value="fault_id">fault_id</option>-->

        <!--</select>-->

        <button class="btn btn-primary">查找</button>

        <button class="btn btn-danger pull-right" ng-click="addFault()">新建</button>

    </div>

    <hr/>

    <table class="table table-striped table-hover table-bordered">

        <tr class="text-align:center">

            <th ng-click="orderKey='fault_id';sortDesc=!sortDesc">ID</th>

            <th ng-click="orderKey='fault_system';sortDesc=!sortDesc">故障系统</th>

            <th ng-click="orderKey='fault_name';sortDesc=!sortDesc">故障名称</th>

            <th ng-click="orderKey='creator';sortDesc=!sortDesc">记录创建人</th>

            <th ng-click="orderKey='main_helper';sortDesc=!sortDesc">故障处理人</th>

            <!--<th width="40%" ng-click="orderKey='phenomenon';sortDesc=!sortDesc" ;>故障现象</th>-->

            <th ng-click="orderKey='occur_time';sortDesc=!sortDesc">发生时间</th>

            <th ng-click="orderKey='status';sortDesc=!sortDesc">当前状态</th>

            <th>操作</th>

        </tr>

        <tr ng-repeat="item in items | filter: query | orderBy: orderKey: sortDesc">

            <td>{{item.fault_id}}</td>

            <td>{{item.fault_system}}</td>

            <td>

                <a href="/api/index.php/Habo_v2/Fault/detail?fault_id={{item.fault_id}}">

                    {{item.fault_name}}

                </a>

            </td>

            <td>{{item.creator}}</td>

            <td>{{item.main_helper}}</td>

            <!--<td style="width:40%; height:25px; overflow: hidden">

                <textarea cols="50">

                   {{item.phenomenon}}

                </textarea>

            </td>-->

            <td><span>{{item.occur_time}}</span></td>

            <td><span ng-class="label {{item.statusLabel}}">{{item.status}}</span></td>

            <td><a ng-href="/api/index.php/Habo_v2/Fault/edit?fault_id={{item.fault_id}}">修改</a> |

                <span ng-click=deleteFault(item.fault_id)><a href="#">删除</a></span>

            </td>

        </tr>

        <tr>

            <td colspan="7" style="text-align: left"><code>total: {{total}}</code></td>

        </tr>

    </table>

</div>

<footer>

    <div class="container footer">

        <div class="navbar navbar-default navbar-fixed-bottom">

            Copyright &copy;

            <script type="text/javascript">

                d = new Date;

                document.write(d.getFullYear());

            </script>

            <span>Habo, Inc. All rights reserved.</span><br/>

            Generated by <a href="http://Habo.oa.com">Habo</a>.

        </div>

    </div>

</footer>

<script>

    var app = angular.module('myApp', []);

    app.controller('faultCtrl', ['$scope', '$http', '$log', '$sce', function ($scope, $http, $log, $sce) {

        $scope.orderKey = 'status';

        $scope.sortDesc = true;

        $scope.deleteFault = function (faultId) {

            swal({

                title: "确定删除么？",

                text: "建议在原先记录直接修改保存即可，不要随意删除",

                type: "warning",

                showCancelButton: true,

                cancellButtonText: '取消删除',

                confirmButtonColor: "#DD6B55",

                confirmButtonText: "确定删除",

                closeOnConfirm: false

            }, function () {

                var param = {

                    'fault_id': faultId

                };

                $.post("/api/index.php/Habo_v2/Fault/delete", param, function (jsondata) {

                    if (jsondata['code'] == 0) {

                        swal({

                            title: "done",

                            text: jsondata['message'],

                            type: "success",

                        }, function () {

                            window.location = "/api/index.php/Habo_v2/Fault/index/index.html";

                        });

                    } else {

                        swal('failed', jsondata['message'], 'error');

                    }

                    $log.debug("delete result: ", jsondata);

                }, "json");

            });

        };

        // 新建

        $scope.addFault = function () {

            window.location = "/api/index.php/Habo_v2/Fault/add";

        };

        // 获取列表items

        $http.get("http://dev.habo.oa.com/api/index.php/Habo_v2/Fault/getFaultBasic")

                .success(function (response) {

                    $scope.items = response.data;

                    for (var item in $scope.items) {

                        if (item.staus != '已解决') {

                            item.statusLabel = 'danger';

                        }

                    }

                    $scope.total = $scope.items.length;

                    $log.info('faultData', response.data);

                });

        $scope.TrustDangerousSnippet = function (post) {

            return $sce.trustAsHtml(post.phenomenon);

        };

    }]);

</script>

</body>

</html>

add.html

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame

         Remove this if you use the .htaccess -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>新建故障单报告</title>

    <!-- Mobile viewport optimized: j.mp/bplateviewport -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- CSS: implied media="all" -->

    <load href="__PUBLIC__/bootstrap/css/bootstrap.min.css"/>

    <load href="__PUBLIC__/jquery/jquery-3.1.1.min.js"/>

    <load href="__PUBLIC__/js/angular.min.js"/>

    <load href="__PUBLIC__/bootstrap/css/bootstrap-datetimepicker.css"/>

    <load href="__PUBLIC__/bootstrap/js/bootstrap-datetimepicker.js"/>

    <load href="__PUBLIC__/bootstrap/js/bootstrap-datetimepicker.zh-CN.js"/>

    <load href="__PUBLIC__/css/sweetalert.css"/>

    <load href="__PUBLIC__/js/sweetalert.min.js"/>

    <load href="__PUBLIC__/Ueditor/ueditor.config.js"/>

    <load href="__PUBLIC__/Ueditor/ueditor.all.min.js"/>

    <load href="__PUBLIC__/Ueditor/lang/zh-cn/zh-cn.js"/>

    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->

    <script src="http://lib.cdc.com/oaui/memberpicker/0.1/js/memberinput.js"></script>

    <load href="/api/Application/Habo_v2/View/Fault/style.css"/>

    <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->

</head>

<body ng-app="faultApp">

<nav class="navbar navbar-inverse" role="navigation">

    <div class="container-fluid">

        <div class="navbar-header">

            <a class="navbar-brand" href="/api/index.php/Habo_v2/Fault/index">运营开发二组故障记录平台</a>

        </div>

        <div class="navbar-header">

            <a class="navbar-brand" href="/api/index.php/Habo_v2/Fault/about"> About </a>

        </div>

    </div>

</nav>

<h2> 新建故障单记录 </h2>

<div ng-controller="addFaultCtrl">

    <div class="container bg-info" style="padding: 30px">

        <form class="form" role="form">

            <div class="form-group" style="width: 40%">

                <label>出故障系统:</label>

                <select ng-model="data.basic.fault_system" type="text" class="form-control" title="故障系统">

                    <option selected>哈勃多维</option>

                    <option>模调监控</option>

                    <option>H5测速及返回码</option>

                    <option>monitor监控</option>

                </select>

            </div>

            <div class="form-group" style="width: 40%">

                <label>故障名称:</label>

                <input ng-model="data.basic.fault_name" type="text"

                       ng-click="addDateTimePicker()"

                       class="form-control" placeholder="故障名称">

            </div>

            <div class="form-group" style="width: 40%">

                <label for="source_type">发现途径:</label>

                <select class="form-control" id="source_type" ng-model="data.basic.source_type" title="发现途径">

                    <option selected>监控报警</option>

                    <option>用户反馈</option>

                </select>

            </div>

            <div class="form-group" style="width: 40%">

                <label for="status">当前状态:</label>

                <select class="form-control" id="status" ng-model="data.basic.status" title="当前状态">

                    <option>已解决</option>

                    <option>待解决</option>

                </select>

            </div>

            <div class="form-group">

                <label for="phenomenon">故障现象:</label>

                <textarea id="phenomenon" placeholder="简单描述"></textarea>

            </div>

            <div class="form-group">

                <label for="scope">影响范围:</label>

                <textarea id="scope" placeholder="影响范围：用户、业务等"></textarea>

            </div>

            <div class="form-group" style="width: 40%">

                <label>事故责任人:</label>

                <input id="responsible_person" type="text" ng-model="data.basic.responsible_person"

                       class="form-control" placeholder="事故责任人">

            </div>

            <div class="form-group" style="width: 40%">

                <label>主要处理人:</label>

                <input id="main_helper" type="text" class="form-control"

                       placeholder="主要处理人">

            </div>

            <div class="form-group" style="width: 40%">

                <label>协助处理人:</label>

                <input id="assist_helper" type="text" class="form-control"

                       ng-click="addDateTimePicker()"

                       placeholder="协助处理人">

            </div>

            <div class="form-group" style="width: 40%">

                <label for="occur_time" class="control-label">故障发生时间:</label>

                <div class="input-group date" data-link-field="occur_time">

                    <input ng-model="data.basic.occur_time" id="occur_time" type="text"

                           class="form-control form_datetime"

                           placeholder="故障发生时间">

                    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>

                </div>

            </div>

            <div class="form-group" style="width: 40%">

                <label for="discover_time" class="control-label">故障发现时间:</label>

                <div class="input-group date" data-link-field="discover_time">

                    <input class="form-control form_datetime" id="discover_time" ng-model="data.basic.discover_time"

                           type="text">

                    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>

                </div>

            </div>

            <div class="form-group" style="width: 40%">

                <label for="solve_time" class="control-label">故障解决时间:</label>

                <div class="input-group date" data-link-field="solve_time">

                    <input class="form-control form_datetime" id="solve_time" ng-model="data.basic.solve_time"

                           type="text">

                    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>

                </div>

            </div>

            <div class="form-group">

                <label for="solution">处理过程:</label>

                <textarea id="solution" placeholder="简要概述处理过程"></textarea>

            </div>

            <div class="form-group">

                <label>故障原因:</label>

                <textarea id="reason" placeholder="请写清楚故障原因"></textarea>

            </div>

            <div class="form-group">

                <label ng-click="addFirstMeasure()">改进措施:</label>

                <!--<span ng-click="addFirstMeasure()"><a href="">添加</a></span>-->

                <table>

                    <th class="col-sm-5">具体措施</th>

                    <th class="col-sm-2">负责人</th>

                    <th class="col-sm-2" ng-click="addDateTimePicker()">完成时间</th>

                    <th class="col-sm-1">完成进度(%)</th>

                    <th class="col-sm-2">操作</th>

                    <tr ng-repeat="measure in data.measures track by $index">

                        <td style="width: 43%">

                            <input ng-model="measure.measure_name" ng-click="addDateTimePicker()"

                                   class="form-control" type="text"

                                   placeholder="输入改进措施" required>

                        </td>

                        <td style="width:20%">

                            <input ng-model="measure.responsible_person" name="measure_person"

                                   class="form-control person_input"

                                   type="text" placeholder="输入负责人">

                        </td>

                        <td style="width:15%">

                            <input ng-model="measure.deadline" type="text"

                                   class="form-control form_datetime"

                                   placeholder="截至日期">

                        </td>

                        <td style="width: 10%">

                            <input ng-model="measure.status" type="number" class="form-control"

                                   placeholder="填写当前进度" title="填写当前进度" min="0" max="100" required>

                        </td>

                        <td>

                            <span ng-click="addMeasure($index)"><a href="">添加</a></span> |

                            <span ng-click="removeMeasure($index)"><a href="">删除</a></span>

                        </td>

                    </tr>

                </table>

            </div>

            <div class="form-group row">

                <button id="reset" type="reset()" class="btn btn-danger col-md-2 col-md-offset-2">重置</button>

                <button id="save" ng-click="save()" class="btn btn-primary col-md-2 col-md-offset-2">保存</button>

            </div>

        </form>

    </div>

</div>

<footer>

    <div class="container footer">

        <div class="navbar navbar-default navbar-fixed-bottom">

            Copyright &copy;

            <script type="text/javascript">

                d = new Date;

                document.write(d.getFullYear());

            </script>

            <span>Habo, Inc. All rights reserved.</span><br/>

            Generated by <a href="http://Habo.oa.com">Habo</a>.

        </div>

    </div>

</footer>

<script>

    var app = angular.module('faultApp', []);

    app.controller('addFaultCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {

        $scope.data = {

            basic: {},

            measures: [

                {

                    measure_name: '',

                    responsible_person: '',

                    deadline: '',

                    status: ''

                }

            ]

        };

        $log.info('init', $scope.data);

        $scope.addMeasure = function (idx) {

            changeValue();

            console.log("faultData chage after", $scope.data);

            var data = {

                measure_name: '',

                responsible_person: '',

                deadline: '',

                status: 0

            };

            $scope.data.measures.splice(idx + 1, 0, data);

            $scope.addDateTimePicker()

        };

        $scope.addFirstMeasure = function () {

            var data = {

                measure_name: '',

                responsible_person: '',

                deadline: '',

                status: 0

            };

            $scope.data.measures.push(data);

            $scope.addDateTimePicker()

        };

        $scope.removeMeasure = function (idx) {

            $scope.data.measures.splice(idx, 1);

        };

        $scope.save = function () {

            changeValue();

            var param = {

                'faultData': $scope.data

            };

            console.log("post param", param);

            $.post("/api/index.php/Habo_v2/Fault/addFault", param, function (jsondata) {

                if (jsondata['code'] == 0) {

                    swal({

                        title: "done",

                        text: jsondata['message'],

                        type: "success",

                    }, function () {

                        window.location = "/api/index.php/Habo_v2/Fault/index/index.html";

                    });

                } else {

                    swal('failed', jsondata['message'], 'error');

                }

                $log.info("result: ", jsondata);

            }, "json");

        };

        $scope.reset = function () {

            swal({

                title: "Are you sure?",

                text: "重置清空后无法恢复",

                type: "warning",

                showCancelButton: true,

                confirmButtonColor: "#DD6B55",

                confirmButtonText: "Yes, delete it!",

                closeOnConfirm: false

            }, function () {

                $scope.data = {};

                $('#phenomenon').val('');

                $("#scope").val("");

                $("#solution").val("");

                $("#reason").val("");

            });

        };

        function changeValue() {

            $scope.data.basic.responsible_person = $("#responsible_person").val();

            $scope.data.basic.main_helper = $('#main_helper').val();

            $scope.data.basic.assist_helper = $('#assist_helper').val();

            $scope.data.basic.phenomenon = phenomenon.getContent();

            $scope.data.basic.scope = scope.getContent();

            $scope.data.basic.solution = solution.getContent();

            $scope.data.basic.reason = reason.getContent();

            $("input[name='measure_person']").each(function (index, element) {

                var person = $(this).val();

                $scope.data.measures[index].responsible_person = person;

            });

            $log.info($scope.data);

        }

        var timeconfig = {

            language: 'zh-CN',

            format: "yyyy-mm-dd hh:ii",

            weekStart: 1,

            todayBtn: 1,

            autoclose: 1,

            todayHighlight: 1,

            startView: 2,

            forceParse: 1,

            showMeridian: 1,

            minuteStep: 1

        };

        $('.form_datetime').datetimepicker(timeconfig);

        $('#responsible_person').memberInput();

        $('#main_helper').memberInput();

        $('#assist_helper').memberInput();

        $scope.addDateTimePicker = function () {

            $('.form_datetime').datetimepicker(timeconfig);

            $('.person_input').memberInput();

        };

        window.UEDITOR_HOME_URL = "__PUBLIC__/Ueditor/";

        var edtorconfig = {

            toolbars: [

                ['fullscreen', 'source', '|', 'undo', 'redo', '|',

                    'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', '|',

                    'simpleupload', 'insertimage']

            ],

            //    initialFrameWidth: 1000,  //初始化编辑器宽度,默认1000

            initialFrameHeight: 200,

            saveInterval: 5000, //5s 默认保存一次

            elementPathEnabled: false  // 元素路径隐藏

        };

        var phenomenon = UE.getEditor('phenomenon', edtorconfig);

        var scope = UE.getEditor('scope', edtorconfig);

        var solution = UE.getEditor('solution', edtorconfig);

        var reason = UE.getEditor('reason', edtorconfig);

    }]);

</script>

</body>

</html>

edit.html

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame

         Remove this if you use the .htaccess -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>编辑故障单报告</title>

    <!-- Mobile viewport optimized: j.mp/bplateviewport -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- CSS: implied media="all" -->

    <load href="__PUBLIC__/bootstrap/css/bootstrap.min.css"/>

    <load href="__PUBLIC__/jquery/jquery-3.1.1.min.js"/>

    <load href="__PUBLIC__/js/angular.min.js"/>

    <load href="__PUBLIC__/bootstrap/css/bootstrap-datetimepicker.css"/>

    <load href="__PUBLIC__/bootstrap/js/bootstrap-datetimepicker.js"/>

    <load href="__PUBLIC__/bootstrap/js/bootstrap-datetimepicker.zh-CN.js"/>

    <load href="__PUBLIC__/css/sweetalert.css"/>

    <load href="__PUBLIC__/js/sweetalert.min.js"/>

    <load href="__PUBLIC__/Ueditor/ueditor.config.js"/>

    <load href="__PUBLIC__/Ueditor/ueditor.all.min.js"/>

    <load href="__PUBLIC__/Ueditor/lang/zh-cn/zh-cn.js"/>

    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->

    <script src="http://lib.cdc.com/oaui/memberpicker/0.1/js/memberinput.js"></script>

    <load href="/api/Application/Habo_v2/View/Fault/style.css"/>

    <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->

</head>

<body ng-app="faultApp">

<nav class="navbar navbar-inverse" role="navigation">

    <div class="container-fluid">

        <div class="navbar-header">

            <a class="navbar-brand" href="/api/index.php/Habo_v2/Fault/index">运营开发二组故障记录平台</a>

        </div>

        <div class="navbar-header">

            <a class="navbar-brand" href="/api/index.php/Habo_v2/Fault/about"> About </a>

        </div>

    </div>

</nav>

<h2> 编辑故障单记录 </h2>

<div ng-controller="addFaultCtrl">

    <div class="container bg-info" style="padding: 30px">

        <form class="form" role="form">

            <input id="faultId" value="{$basic.fault_id}" hidden>

            <div class="form-group" style="width: 40%">

                <label>出故障系统:</label>

                <select ng-model="data.basic.fault_system" type="text" class="form-control" placeholder="故障系统">

                    <option selected>哈勃多维</option>

                    <option>模调监控</option>

                    <option>H5测速及返回码</option>

                    <option>monitor监控</option>

                </select>

            </div>

            <div class="form-group" style="width: 40%">

                <label>故障名称:</label>

                <input ng-model="data.basic.fault_name" type="text" class="form-control" placeholder="故障名称">

            </div>

            <div class="form-group" style="width: 40%">

                <label for="source_type">发现途径:</label>

                <select class="form-control" id="source_type" ng-model="data.basic.source_type">

                    <option selected>监控报警</option>

                    <option>用户反馈</option>

                </select>

            </div>

            <div class="form-group" style="width: 40%">

                <label for="status">当前状态:</label>

                <select class="form-control" id="status" ng-model="data.basic.status">

                    <option>已解决</option>

                    <option>待解决</option>

                </select>

            </div>

            <div class="form-group">

                <label for="phenomenon">故障现象:</label>

                <textarea id="phenomenon" placeholder="简单描述">{:htmlspecialchars_decode($basic['phenomenon'])}</textarea>

            </div>

            <div class="form-group">

                <label for="scope">影响范围:</label>

                <textarea id="scope" placeholder="影响范围：用户、业务等">{:htmlspecialchars_decode($basic['scope'])}</textarea>

            </div>

            <div class="form-group" style="width: 40%">

                <label>事故责任人:</label>

                <input id="responsible_person" type="text"

                       ng-model="data.basic.responsible_person" value="{$basic.responsible_person}"

                       class="form-control" placeholder="事故责任人">

            </div>

            <div class="form-group" style="width: 40%">

                <label>主要处理人:</label>

                <input id="main_helper" type="text" class="form-control"

                       ng-model="data.basic.main_helper" value="{$basic.main_helper}"

                       placeholder="主要处理人">

            </div>

            <div class="form-group" style="width: 40%">

                <label>协助处理人:</label>

                <input id="assist_helper" type="text" class="form-control"

                       ng-model="data.basic.assist_helper" value="{$basic.assist_helper}"

                       placeholder="协助处理人">

            </div>

            <div class="form-group" style="width: 40%">

                <label for="occur_time" class="control-label">故障发生时间:</label>

                <div class="input-group date" data-link-field="occur_time">

                    <input class="form-control form_datetime" id="occur_time" ng-model="data.basic.occur_time"

                           type="text">

                    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>

                </div>

            </div>

            <div class="form-group" style="width: 40%">

                <label for="discover_time" class="control-label">故障发现时间:</label>

                <div class="input-group date" data-link-field="discover_time">

                    <input class="form-control form_datetime" id="discover_time" ng-model="data.basic.discover_time"

                           type="text">

                    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>

                </div>

            </div>

            <div class="form-group" style="width: 40%">

                <label for="solve_time" class="control-label">故障解决时间:</label>

                <div class="input-group date" data-link-field="solve_time">

                    <input class="form-control form_datetime" id="solve_time" ng-model="data.basic.solve_time"

                           type="text">

                    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>

                </div>

            </div>

            <div class="form-group">

                <label for="solution">处理过程:</label>

                <textarea id="solution" placeholder="简要概述处理过程">{:htmlspecialchars_decode($basic['solution'])}</textarea>

            </div>

            <div class="form-group">

                <label>故障原因:</label>

                <textarea id="reason" placeholder="请写清楚故障原因">{:htmlspecialchars_decode($basic['reason'])}</textarea>

            </div>

            <div class="form-group">

                <label ng-click="addFirstMeasure()">改进措施:</label>

                <!--<span ng-click="addFirstMeasure()"><a href="">添加</a></span>-->

                <table>

                    <th class="col-sm-5">具体措施</th>

                    <th class="col-sm-2">负责人</th>

                    <th class="col-sm-2" ng-click="addDateTimePicker()">完成时间</th>

                    <th class="col-sm-1">完成进度(%)</th>

                    <th class="col-sm-2">操作</th>

                    <tr ng-repeat="measure in data.measures track by $index">

                        <td style="width: 43%">

                            <input ng-model="measure.measure_name" ng-click="addDateTimePicker()"

                                   class="form-control" type="text"

                                   placeholder="输入改进措施" required>

                        </td>

                        <td style="width:20%">

                            <input ng-model="measure.responsible_person" name="measure_person"

                                   class="form-control person_input"

                                   type="text" placeholder="输入负责人">

                        </td>

                        <td style="width:15%">

                            <input ng-model="measure.deadline" type="text"

                                   class="form-control form_datetime"

                                   placeholder="截至日期">

                        </td>

                        <td style="width: 10%">

                            <input ng-model="measure.status" type="text" class="form-control"

                                   placeholder="填写当前进度" title="填写当前进度" required>

                        </td>

                        <td>

                            <span ng-click="addMeasure($index)"><a href="">添加</a></span> |

                            <span ng-click="removeMeasure($index)"><a href="">删除</a></span>

                        </td>

                    </tr>

                </table>

            </div>

            <div class="form-group row">

                <button id="reset" ng-click="reset()" class="btn btn-danger col-md-2 col-md-offset-2">重置</button>

                <button id="save" ng-click="save()" class="btn btn-primary col-md-2 col-md-offset-2">保存</button>

            </div>

        </form>

    </div>

</div>

<footer>

    <div class="container footer">

        <div class="navbar navbar-default navbar-fixed-bottom">

            Copyright &copy;

            <script type="text/javascript">

                d = new Date;

                document.write(d.getFullYear());

            </script>

            <span>Habo, Inc. All rights reserved.</span><br/>

            Generated by <a href="http://Habo.oa.com">Habo</a>.

        </div>

    </div>

</footer>

<script>

    var app = angular.module('faultApp', []);

    app.controller('addFaultCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {

        $scope.data = {

            basic: {},

            measures: [

                {

                    measure_name: '',

                    responsible_person: '',

                    deadline: '',

                    status: ''

                }

            ]

        };

        $log.info('init', $scope.data);

        $scope.addMeasure = function (idx) {

            var data = {

                measure_name: '',

                responsible_person: '',

                deadline: '',

                status: 0

            };

            $scope.data.measures.splice(idx + 1, 0, data);

            $scope.addDateTimePicker()

        };

        $scope.addFirstMeasure = function () {

            var data = {

                measure_name: '',

                responsible_person: '',

                deadline: '',

                status: 0

            };

            $scope.data.measures.push(data);

            $scope.addDateTimePicker()

        };

        $scope.removeMeasure = function (idx) {

            $scope.data.measures.splice(idx, 1);

        };

        $scope.addDateTimePicker = function () {

            $('.form_datetime').datetimepicker(timeconfig);

            $('.person_input').memberInput();

        };

        $scope.save = function () {

            changeValue();

            var param = {

                'fault_id': $('#faultId').val(),

                'faultData': $scope.data

            };

            console.log("post param", param);

            $.post("/api/index.php/Habo_v2/Fault/updateFault", param, function (jsondata) {

                if (jsondata['code'] == 0) {

                    swal({

                        title: "done",

                        text: jsondata['message'],

                        type: "success",

                    }, function () {

                        window.location = "/api/index.php/Habo_v2/Fault/index/index.html";

                    });

                } else {

                    swal('failed', jsondata['message'], 'error');

                }

                $log.debug("result: ", jsondata);

            }, "json");

        };

        $scope.reset = function () {

            $scope.data = {

                basic: {},

                measures: [

                    {

                        measure_name: '',

                        responsible_person: '',

                        deadline: '',

                        status: ''

                    }

                ]

            };

            $log.debug('phenomenon init', phenomenon.getContent());

            phenomenon.reset();

            $("#scope").val("");

            $("#solution").val("");

            $("#reason").val("");

            $log.debug('phenomenon reset', phenomenon.getContent());

        };

        $http.get("http://dev.habo.oa.com/api/index.php/Habo_v2/Fault/getFaultDetail", {params: {fault_id: $('#faultId').val()}})

                .success(function (response) {

                    $scope.data = response.data;

                    $log.info('get fault detail', response.data);

                });

        function changeValue() {

            $scope.data.basic.responsible_person = $("#responsible_person").val();

            $scope.data.basic.main_helper = $('#main_helper').val();

            $scope.data.basic.assist_helper = $('#assist_helper').val();

            $scope.data.basic.phenomenon = phenomenon.getContent();

            $scope.data.basic.scope = scope.getContent();

            $scope.data.basic.solution = solution.getContent();

            $scope.data.basic.reason = reason.getContent();

            $("input[name='measure_person']").each(function (index, element) {

                var person = $(this).val();

                $scope.data.measures[index].responsible_person = person;

            });

            $log.info($scope.data);

        }

        $('#responsible_person').memberInput();

        $('#main_helper').memberInput();

        $('#assist_helper').memberInput();

        var timeconfig = {

            language: 'zh-CN',

            format: "yyyy-mm-dd hh:ii",

            weekStart: 1,

            todayBtn: 1,

            autoclose: 1,

            todayHighlight: 1,

            startView: 2,

            forceParse: 1,

            showMeridian: 1,

            minuteStep: 1

        };

        $('.form_datetime').datetimepicker(timeconfig);

        window.UEDITOR_HOME_URL = "__PUBLIC__/Ueditor/";

        var config = {

            toolbars: [

                ['fullscreen', 'source', '|', 'undo', 'redo', '|',

                    'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', '|',

                    'simpleupload', 'insertimage']

            ],

            //    initialFrameWidth: 1000,  //初始化编辑器宽度,默认1000

            initialFrameHeight: 200,

            saveInterval: 5000, //5s 默认保存一次

            elementPathEnabled: false  // 元素路径隐藏

        };

        var phenomenon = UE.getEditor('phenomenon', config);

        var scope = UE.getEditor('scope', config);

        var solution = UE.getEditor('solution', config);

        var reason = UE.getEditor('reason', config);

    }]);

</script>

</body>

</html>

angularjs jquery thinkPHP3.2.3 相结合小实例的更多相关文章

  1. jquery-1 jquery几个小实例

    jquery-1  jquery几个小实例 一.总结 一句话总结:jquery真的是简单加简便. 1.jquery中改变多个css属性怎么整? 可以链式连接方式,也可以大括号整多个.中间是键值对加引号 ...

  2. 【jQuery小实例】---2自定义动画

    ---本系列文章所用使用js均可在本博客文件中找到 本节用jQuery完一个简易的动画效果,一个小驴跑跑的效果.和一个类似qq面板效果.大致也分为三步:添加jquery-1.8.3.js文件.这个是不 ...

  3. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...

  4. jQuery.uploadify文件上传组件实例讲解

    1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...

  5. JQuery数组详解（含实例）

    <!doctype html>jQuery数组处理详解(含实例演示)@Mr.Think 演示所用数组 var _mozi=['墨家','墨子','墨翟','兼爱非攻','尚同尚贤']; 1 ...

  6. winform 异步读取数据 小实例

    这几天对突然对委托事件,异步编程产生了兴趣,大量阅读前辈们的代码后自己总结了一下. 主要是实现 DataTable的导入导出,当然可以模拟从数据库读取大量数据,这可能需要一定的时间,然后 再把数据导入 ...

  7. Html5+css3+angularjs+jquery+webAPi 开发手机web（一）

    前言 随着浏览器的发展 HTML5+CSS3 的使用也越来越广泛,一直想学这个,想学那个折腾下来几乎没学到什么东西.工作经验告诉我,要掌握一门技术,就需要在项目中去磨练, 所以我就准备开发一个手机端的 ...

  8. CSS应用内容补充及小实例

    一.clear 清除浮动 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  9. Objective-C之代理设计模式小实例

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

随机推荐

  1. Hash哈希类型

    hash类型是使用得非常非常多的一种redis数据类型,相当于C#中的Dictionary和Hashtable. hset命令(语法:hset key field value)将哈希表key中的fie ...

  2. JSP常见指令

    JSP常见指令 标签: jspincludeservletjavaappletarchive 2011-11-07 20:07 13193人阅读 评论(3) 收藏 举报 版权声明:本文为博主原创文章, ...

  3. 再议C++的性能

    最近在公司里的项目做的是性能优化,相关性能调优的经验总结也在前一篇文章里说了.这里再说一说和性能相关的东西.主要针对的是C++类库中常用的一些数据结构,比方说std::string.顺序容器(vect ...

  4. 集合ArrayList

    /*集合ArrayList * 例如: * 1.创建:ArrayList<Egg> myList = new ArrayList<Egg>(); *      Egg类型的集合 ...

  5. hive的Query和Insert，Group by，Aggregations（聚合）操作

    1.Query (1)分区查询 在查询的过程中,采用那个分区来查询是通过系统自动的决定,但是必须是在分区列上基于where子查询. SELECT page_views.* FROM page_view ...

  6. OrCAD搭建Access数据库

    刚进入到一个小公司,接到的第一个电路设计的案子是从零开始的,辛苦就不说,关键是这么不严谨,容易出错,于是乎,问题来了,能否从零开始着手建立个类似于以前公司的数据库,管理原理图封装,PCB封装及规格书! ...

  7. ABOUT LIFETIME

    This is where we started We've come a long way since our beginning. It all started as an idea in a g ...

  8. 如何在Eclipse中设置默认的JSP文件头部编码

    如何在Eclipse中设置默认的JSP文件头部编码 一般,我们为了以后在导入和导出程序的时候(特别是项目较大,文件多)一般都默认文件编码格式为UTF-8 如果你通常都是通过Eclipse来编写程序,那 ...

  9. js限制文本框只能输入整数或者带小数点[转]

    这篇文章是关于js限制文本框只能输入整数或者带小数点的内容,以下就是该内容的详细介绍. 做表单验证的时候是否会碰到验证某个输入框内只能填写数字呢,仅允许输入整数数字或者带小数点的数字.下面这段代码也许 ...

  10. 数据库最大连接池max pool size

    本文导读:Max Pool Size如果未设置则默认为100,理论最大值为32767.最大连接数是连接池能申请的最大连接数,如果数据库连接请求超过此数,后面的数据库连接请求将被加入到等待队列中,这会影 ...