如何将文本字段与angularJs值进行比较?

时间:2018-01-12 05:36:39

标签: javascript jquery html angularjs html5-canvas

我试图将文本框中输入的值(即数量字段)与后端的动态值(AngularJs服务)进行比较。

enter image description here

这里我需要比较数量显示和文本框中输入的数量是否匹配,否则需要显示警告弹出窗口。

  

这是我的HTML

<div class="content pageup" ng-app="whApp">
    <div id="project-dashboard" class="page-layout simple  tabbed">

        <!-- content stats here  -->
        <div class="page-content">

            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <nav class="breadcrumb">
                    <a class="breadcrumb-item" ui-sref="processOrders">Orders</a> <span
                        class="breadcrumb-item active">Raw Materials </span>
                </nav>

            </ul>

            <div class="tab-content">
                <div class="tab-pane fade show active" id="home-tab-pane"
                    role="tabpanel" aria-labelledby="home-tab">
                    <!-- add user form -->
                    <div class="widget widget-7 card">
                        <div class="description bg-purble-custom-100">
                            <div class="description-text ">

                                <div class="row">
                                    <div class="col-md-6">
                                        <a href="../assets/pdf/001002135791.pdf" target="_blank">
                                            <h5 class="text-white-500">
                                                <span class="text-white-500 icon-format-page-break"></span>
                                                Order Number :<b> {{processorderProdNumber}} HOSKOTE
                                                    PLANT </b>
                                            </h5>
                                        </a>
                                    </div>
                                    <div class="col-md-5 ">
                                        <div class="filter1x">
                                            <a href="../assets/pdf/001002135791.pdf" target="_blank"
                                                data-toggle="tooltip" data-placement="left" title=""
                                                data-original-title="Find the Order PDF"><i
                                                class="text-white-500 s-9 icon-file-pdf"></i> </a>
                                        </div>
                                    </div>
                                    <div class="col-md-1 "></div>
                                </div>
                            </div>

                        </div>
                        <div class="widget-content p-4">

                            <!-- the real content inside widger -->

                            <h5 class="subheading">Material Memo :
                                {{processOrderDetails[0].productTable.productDescription}}</h5>
                            <!-- table starts here  -->

                            <!-- the real content inside widger -->
                            <!-- add user form ends here -->

                            <table id="sample-data-table" class="table table-striped">
                                <thead class="thead-dark"
                                    style="background-color: #202528; color: white;">
                                    <tr>
                                        <th class="secondary-text">
                                            <div class="">
                                                <span class="column-title"># </span>
                                            </div>
                                        </th>

                                        <th class="secondary-text">
                                            <div class="">
                                                <span class="column-title">Raw Material No.</span>
                                            </div>
                                        </th>
                                        <th class="secondary-text">
                                            <div class="">
                                                <span class="column-title">Description</span>
                                            </div>
                                        </th>
                                        <th class="secondary-text">
                                            <div class="">
                                                <span class="column-title">Type</span>
                                            </div>
                                        </th>



                                        <th class="secondary-text">
                                            <div class="">
                                                <span class="column-title">Phase</span>
                                            </div>
                                        </th>
                                        <th class="secondary-text">
                                            <div class="">
                                                <span class="column-title">Quantity.</span>
                                            </div>
                                        </th>


                                        <th class="secondary-text">
                                            <div class="">
                                                <span class=""></span>
                                            </div>
                                        </th>
                                        <th class="secondary-text">
                                            <div class="">
                                                <span class="column-title">Action</span>
                                            </div>
                                        </th>

                                    </tr>
                                </thead>
                                <tbody ng-repeat="processOrderDetail in processOrderDetails">

                                    <tr>
                                        <th scope="row">{{$index+1}}</th>
                                        <td>{{processOrderDetail.rawmaterialTable.rawmaterialNumber}}</td>
                                        <td>{{processOrderDetail.rawmaterialTable.rawmaterialDescription}}</td>
                                        <td>{{processOrderDetail.type}}</td>
                                        <td>{{processOrderDetail.phase}}</td>
                                        <td>{{processOrderDetail.quantity}}</td>
                                        <td >
                                        <div ng-if="processOrderDetail.rawmaterialTable.rawmaterialNumber != 5947 || processOrderDetail.rawmaterialTable.rawmaterialNumber != 5947">
                                            <button type="button"  ng-click="displayResult($event,processOrderDetail.rawmaterialTable.rawmaterialNumber)"
                                                class="btn btn-icon  fuse-ripple-ready">
                                                <span class=" text-purble-custom-100   icon-plus-circle"></span>Add
                                            </button>
                                            </div>
                                        </td>

                                        <td><input ng-click="release(processOrderDetail)"  onclick="this.style.color='#008000',this.value='RM Released',disabled ='disabled'"  class="btn btn-secondary right fuse-ripple-ready"
type="button" value="Release" id="myButton1"  />
                                            <!-- <button type="button"
                                                class="btn btn-secondary fuse-ripple-ready"
                                                ng-click="release(processOrderDetail)"   onclick="this.style.backgroundcolor = '#4caf50!important'; this.style.color='#000000';  this.disabled=true;" >Release</button>
                                         -->
                                        </td>

                                    </tr>

                                </tbody>
                            </table>
                            <button type="button" data-toggle="modal"
                                data-target="#doneModal"
                                class="btn btn-secondary right fuse-ripple-ready" ng-show="showDone"
                                ng-click="done(processOrderDetails[0].processorderProd.processorderProdNumber)">Done</button>
                            <script type="text/javascript">
                                    $('#sample-data-table').DataTable({
                                    responsive: true
                                    });
                                    </script>

                        </div>
                    </div>


                </div>

                <script>

         function remove(button)
        {
            //document.getElementById("sample-data-table").deleteRow(-1).innerHTML = '<td>1</td><td>2</td>';
             $(button).closest("td").parent().remove();
        }


                        </script>

            </div>


        </div>
    </div>
    <!-- content ends here -->
</div>
<script type="text/javascript"
    src="../assets/js/apps/dashboard/project.js"></script>
</div>

点击Add +按钮,新行包含BatchNumber,Location和Qty字段。 我有兴趣将数量与输入的数量之和进行比较。 例如,如果Quantity = 600和Sum(Qty)= 600(100 + 100 + 400),它们应该没有警告或弹出,如果这不匹配则Popup应该来。

这是我的控制器

$scope.displayResult = function($event, rmId) {
                console.log("************");
                // console.log(button);
                console.log(rmId);
                var btn = $event.currentTarget;
                console.log("************");
                $(btn)
                .closest("tbody")
                .append(
                        '<tr><td><label for="inputPassword1" class="label-custom">Batch Number</label><input type="text" id="bacthNo" class="bacthNo form-control md-has-value" required  ></td><td><label for="inputPassword1" class="label-custom">Location</label> <input type="text" id="location" class="location form-control md-has-value" required  ></td> <td ><label for="inputPassword1" class="label-custom">Qty</label> <input type="text" id="qty" class="qty form-control md-has-value" required s></td><td ><label style="display:none;" for="inputPassword1" class="label-custom">Qty</label> <input style="display:none;" type="text" id="rawMaterialId" class="rawMaterialId qty form-control md-has-value" required value="'
                        + rmId
                        + '"></td><td><button type="button" class="btn btn-danger fuse-ripple-ready"  onclick="remove(this);">- remove</button></td></tr> ');
                // document.getElementById("appender").
            };
$scope.done = function(processorderProdNumber) {
                console.log("Calling Status Change");
                /** *********** */
                console.log("done method called");
                var bacthNos = [];
                var locations = [];
                var qtys = [];
                var rawMaterialIds = [];
                var data = [];

                $("#sample-data-table > tbody > tr").each(
                        function() {
                            var eachtr = $(this);
                            // console.log(eachtr)
                            var batchNumber = eachtr.find('.bacthNo')
                            .val();
                            var location = eachtr.find('.location')
                            .val();
                            var quantity = eachtr.find('.qty').val();
                            var rawMaterialId = eachtr.find(
                            '.rawMaterialId').val();

                            if (batchNumber != undefined) {
                                console.log("batchNo=>" + batchNumber
                                        + " & location=>" + location
                                        + " & qty=>" + quantity
                                        + " & rawMaterialId=>"
                                        + rawMaterialId);
                                // alert("batchNo=>"+batchNumber+" &
                                // location=>"+location+" &
                                // qty=>"+quantity+" &
                                // rawMaterialId=>"+rawMaterialId);
                                bacthNos.push(batchNumber);
                                locations.push(location);
                                qtys.push(quantity);
                                rawMaterialIds.push(rawMaterialId);
                            }
                        });
                console.log(bacthNos);
                console.log(locations);
                console.log(qtys);
                console.log(rawMaterialIds);
                // console.log("sadsadasdsasadsad");
                for (var i = 0; i < bacthNos.length; i++) {
                    data[i] = {};
                    data[i].batchNumber = bacthNos[i];
                    data[i].location = locations[i];
                    data[i].quantity = qtys[i];
                    data[i].rawMaterialId = rawMaterialIds[i];
                }
                /** *********** */
                console.log(data);
                var convertData = [];

                for (var i = 0; i < data.length; i++) {
                    var outerData = data[i];
                    convertData[i] = {};
                    // checkContains
                    if ($scope.checkContains(convertData,
                            outerData.rawMaterialId)) {
                        continue;
                    }

                    var batchStr = "";
                    var qtyStr = "";
                    var locationStr = "";
                    for (var j = 0; j < data.length; j++) {
                        var innerData = data[j];
                        if (outerData.rawMaterialId == innerData.rawMaterialId) {
                            batchStr += innerData.batchNumber + ",";
                            locationStr += innerData.location + ",";
                            qtyStr += innerData.quantity + ",";
                        }
                    }
                    convertData[i].rawMaterialId = outerData.rawMaterialId;
                    convertData[i].batchNumber = batchStr.substring(0,
                            batchStr.length - 1);
                    convertData[i].location = locationStr.substring(0,
                            locationStr.length - 1);
                    convertData[i].quantity = qtyStr.substring(0,
                            qtyStr.length - 1);
                }
                convertData = convertData.filter(function(x) {
                    if (JSON.stringify(x) === '{}') { // This will
                        // check if the
                        // object is
                        // empty
                        return false;
                    } else
                        return true;
                });

欢迎任何更正和建议。谢谢。

0 个答案:

没有答案