AngularJS：算術演算子を数値に変換する

AngularJSを初めて使用しています。AngularJS：算術演算子を数値に変換する

私は、操作を行う単純な電卓アプリケーションから始めています。+-*と/です。

モジュール：myMdl.js

var ap = angular.module("myMdl", [])

コントローラー：myCtrl1.js

ap.controller("myCtrl1", function($scope) { 
    $scope.Number1 = "1"; 
    $scope.Number2= "2"; 
});

ビュー：Calculator.html

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
<body> 

<h1> Calculator Application </h1> 

<div ng-app="myMdl" ng-controller="myCtrl1"> 
    <br> 
    Select Operator: 
    <ul> 
    <input type="radio" ng-model="Mdloperator" name="operator" ng-value="+" checked/> + <br> 
    <input type="radio" ng-model="Mdloperator" name="operator" ng-value="-" /> - <br> 
    <input type="radio" ng-model="Mdloperator" name="operator" ng-value="*"/> * <br> 
    <input type="radio" ng-model="Mdloperator" name="operator" ng-value="/"/>/<br> 
    </ul>    
    Enter Value's: 
    <ul> 
     <input type="number" ng-model="Number1" value="{{Number1}}" /> <br> 
     <input type="number" ng-model="Number2" value="{{Number2}}" /> <br> 
    </ul> 
    Result: <br> 
    <ul> 
     <input type="number" ng-model="result" value="{{Number1 + Mdloperator + Number2}}" placeholder="Result"/> 
    </ul> 
</div> 

<script src="myMdl.js"></script> 
<script src="myCtrl1.js"></script> 

</body> 
</html>

出典

2017-11-21 MAK

1の原因になります）ngValueが式を期待しますが、簡単な+サインがあります有効な式ではない場合、コンソールにエラーが表示されます。そのため、type="radio"要素にデータを入力するときに文字列を処理する必要があります。

2）文字列を扱う際には、$parse serviceを使用してこの文字列を結果に評価する必要があります。

3）input type="number"要素でngModelをvalue="{{...}}"と一緒に使用する必要はありません。

ここでは例を参照してください。

angular.module("myMdl", []) 
 
.controller("myCtrl1", function($scope, $parse) { 
 
    var ctrl = this; 
 
    
 
    ctrl.Mdloperator = '/'; 
 
    ctrl.Number1 = 1; 
 
    ctrl.Number2 = 2; 
 
    
 
    ctrl.getValue = function(val){ 
 
    return angular.isString(val) ? $parse(val)($scope) : val; 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 

 

 
<h1> Calculator Application </h1> 
 

 
<div ng-app="myMdl" ng-controller="myCtrl1 as $ctrl"> 
 
    <br> 
 
    Select Operator: 
 
    <ul> 
 
    <input ng-repeat-start="op in ['+', '-', '*', '/'] track by $index" type="radio" ng-model="$ctrl.Mdloperator" name="operator" ng-value="op" /> {{::op}} <br ng-repeat-end/> 
 
    </ul>    
 
    Enter Value's: 
 
    <ul> 
 
     <input type="number" ng-model="$ctrl.Number1" /> <br> 
 
     <input type="number" ng-model="$ctrl.Number2" /> <br> 
 
    </ul> 
 
    Result: <br> 
 
    <ul> 
 
     <input type="number" value="{{$ctrl.getValue($ctrl.Number1 + $ctrl.Mdloperator + $ctrl.Number2)}}" placeholder="Result"/> 
 
    </ul> 
 
</div>

を

出典

2017-11-21 15:27:08

問題がvalue="{{Number1 + Mdloperator + Number2}}" javascriptのである数に変換しDATAT文字列に整数の+演算子を使用すると、ypesが文字列に変換されます。

解決策の一つが指定できます

<html> 
     <head> 
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
     </head> 
     <body> 
      <h1> Calculator Application </h1> 
      <div ng-app="myMdl" ng-controller="myCtrl1"> 
       <br/> 
       <span>Select Operator:</span> 
       <ul> 
        <input type="radio" ng-model="Mdloperator" name="operator" ng-value="+" checked/>+<br/> 
        <input type="radio" ng-model="Mdloperator" name="operator" ng-value="-" />-<br/> 
        <input type="radio" ng-model="Mdloperator" name="operator" ng-value="*"/>*<br/> 
        <input type="radio" ng-model="Mdloperator" name="operator" ng-value="/"/>/<br/> 
       </ul>    
       <span>Enter Value's:</span>  
       <ul> 
        <input type="number" ng-model="Number1" value="{{Number1}}" /> <br/> 
        <input type="number" ng-model="Number2" value="{{Number2}}" /> <br/> 
       </ul> 
       <span>Result:</span><br/> 
       <div ng-switch="Mdloperator"> 
        <span ng-switch-when="+">{{Number1 + Number2}}</span> 
        <span ng-switch-when="-">{{Number1 - Number2}}</span> 
        <span ng-switch-when="*">{{Number1 * Number2}}</span> 
        <span ng-switch-when="/">{{Number1/Number2}}</span> 
       </div> 
      </div> 

      <script src="myMdl.js"></script> 
      <script src="myCtrl1.js"></script> 
     </body> 
</html>

であっても、あなたのHTMLが二度定義されたHTMLのようないくつかの問題、ない頭タグなど

出典

2017-11-21 15:19:35

AngularJS：算術演算子を数値に変換する

答えて

関連する問題