1

私の問題はかなりシンプルですが、性質上わかりにくいです。 index.phpをロードすると(xamppを使ってlocalhostとして)、簡単な形式で表示されます。現在、このフォームには複数の要素があり、まだ進行中ですので、複数のバグの可能性は考えられます。しかし、本当に迷惑な1つのバグがあります。入力フィールド(type = "number")は、コンテンツが変更されると、anglejsの双方向 'BIND'プロパティを緩和します。

問題:

期日要素、彼らはそれにバインドしているという事実によるもので、以下の入力 ボックスの変更の内容を変更するには。フィールドの の値がそれに応じて変更されるたびに、今度は は期限を変更する回数に関係しませんので、angularjsに感謝します。

入力フィールドの値を変更すると、BUGが消えます。 元々は27だったのですが、idk 10に変更しました。* NOW 変更日時を変更した場合、変更された入力フィールドは同じままです * I.E.値10で、私はそれが変わりたくないと思っています。

さらに、あなたの人のうち1人がangularjsコーダーのアフェソシスである場合、 と私にはいくつかのヒントがあります。私はちょうど..... ..... "私は賛成です。"

のindex.php

<!-- addService.html --> 
<?php 
    $version = time(); 
?> 
<!DOCTYPE html> 
<html> 
<head> 

    <!-- CSS (load bootstrap and our custon css files) --> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 

    <!-- JS (load angular, ui-router and our custom js file) --> 
    <script src="http://code.angularjs.org/1.2.13/angular.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script> 
    <script src="ctrl-add-service.js"></script> 
    <script src="services.js"></script> 
</head> 
<body> 
<div ng-app="mainApp" ng-controller="ctrl-add-service"> 
    <div class="row"> 
     <div class="col-md-2"></div> 
     <div class="col-md-8"> 
      <h1 align="center">SERVICE FORM</h1> 
      <form role="form" ng-submit="createService()"> 
       <div> 
        <label>Service Name</label> 
        <input type="text" class="form-control" placeholder="Enter service name here" ng-pattern="/^[a-zA-Z0-9_]*$/" required> 
       </div> 
       <div class="row"> 
        <div class="col-md-6"> 
         <label>Due Date</label> 
         <input type="date" class="form-control" ng-model='dueDate' ng-change="setFields()" required> 
        </div> 
        <div class="col-md-6"> 
         <label>Task Date</label> 
         <input type="date" class="form-control" required> 
        </div> 
       </div> 
       <div style="margin-top: 20px;margin-bottom: 20px;" align="center"> 
        <label>Period</label> 
        <label class="radio-inline"><input type="radio" ng-model="value" value='12' ng-change="setFields()">Annually</label> 
        <label class="radio-inline"><input type="radio" ng-model="value" value='6' ng-change="setFields()">Semi-Annually</label> 
        <label class="radio-inline"><input type="radio" ng-model="value" value='4' ng-change="setFields()">Quarterly</label> 
        <label class="radio-inline"><input type="radio" ng-model="value" value='1' ng-change="setFields()">Monthly</label> 
       </div> 
       <div align="center"> 
        <div> 
         <div style="display:inline-block;"><label>Jan</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[0]' ng-required='!fields[0]'></div> 
         <div style="display:inline-block;"><label>Feb</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[1]' ng-required='!fields[1]'></div> 
         <div style="display:inline-block;"><label>Mar</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[2]' ng-required='!fields[2]'></div> 
         <div style="display:inline-block;"><label>Apr</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[3]' ng-required='!fields[3]'></div> 
        </div> 

         <div style="display:inline-block;"><label>May</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[4]' ng-required='!fields[4]'></div> 
         <div style="display:inline-block;"><label>Jun</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[5]' ng-required='!fields[5]'></div> 
         <div style="display:inline-block;"><label>Jul</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[6]' ng-required='!fields[6]'></div> 
         <div style="display:inline-block;"><label>Aug</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[7]' ng-required='!fields[7]'></div> 

        <div> 
         <div style="display:inline-block;"><label>Sep</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[8]' ng-required='!fields[8]'></div> 
         <div style="display:inline-block;"><label>Oct</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[9]' ng-required='!fields[9]'></div> 
         <div style="display:inline-block;"><label>Nov</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[10]' ng-required='!fields[10]'></div> 
         <div style="display:inline-block;"><label>Dec</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[11]' ng-required='!fields[11]'></div> 
        </div> 
       </div> 
       <div align="center" style="margin-top: 20px;"> 
        <button type="submit" class="btn btn-primary">Create</button> 
        <button type="reset" class="btn btn-danger">Reset</button> 
       </div> 
      </form> 
     </div> 
     <div class="col-md-2"></div> 
    </div> 
</div> 
</body> 
</html> 

CTRL-アドインservice.js(コントローラ)(アプリのサービス)

// ctrl-add-service.js   Controller for the add service option in the nav bar of the home screen. 
var mainApp = angular.module("mainApp",[]); 

mainApp.controller('ctrl-add-service',function($scope, DueDateService){ 

    $scope.value ='1'; 
    $scope.setFields = function() { 
     $scope.date = DueDateService.date($scope.dueDate); 
     $scope.fields = DueDateService.fields(DueDateService.month($scope.dueDate), $scope.value);   // first parameter passes month in int, second parameter passes period value in int. 
    }; 
}); 

services.js

// services.js   services.js of the account direcotry of the project. It is used by the mainApp.  

//DueDateService 

mainApp.service('DueDateService', function(){ 

    this.month = function(date) { 
     var temp = new Date(date); 
     month = temp.getMonth(); 
     console.log(month+1+" is the month"); 
     return (month+1); 
    }; 

    this.date = function(date) { 
     var temp = new Date(date); 
     date = temp.getDate(); 
     console.log(date+" is the date"); 
     return (date); 
    }; 


    this.fields = function(month,period) { 
     var lap = parseInt(period);   // possible values of lap can be [12,6,4,1] 
     var iteration = 12/lap;    // possible values of iteration can be [1,2,3,12]  
     var selectedFields = [true,true,true,true,true,true,true,true,true,true,true,true];  

     for (var i=1; i<=iteration; i++) { 
      if(month>12) { 
       month = month - 12; 
      } 
      selectedFields[month-1]= false; 
      month = month + lap; 
     } 

     return selectedFields; 
    }; 

}); 

答えて

0

な用途私はあなたがng-modelng-valueを変更し、このように、あなたの日付のArrayを作成する必要があると思う参照してください。

ng-model='dates[0]' 
ng-model='dates[1]' 
ng-model='dates[2]' 
... 

そして、あなたのコントローラこのようになります:

var date = DueDateService.date($scope.dueDate); 
$scope.dates = Array(12).fill(date); 

これを参照してください:https://plnkr.co/edit/p8O14Y80hCWyNmxnYxbF

+0

ありがとうございました。私はそれを認めます。 – Karan

0

以下の行では、なぜng-valueをとっていますか?ng-model = "date"を取らなければならないと思います。

NG-値が https://docs.angularjs.org/api/ng/directive/ngValue

<div style="display:inline-block;"><label>Jan</label><input type="number" class="form-control" ng-value='date' ng-model="date" ng-disabled='fields[0]' ng-required='!fields[0]'></div> 
関連する問題