AngularJS计算总价

AngularJS 计算总价


<html lang="en" ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="angular.min.js">script>
    <style>
      *{
        margin: 0 auto;
      }
      ul{
        list-style: none;
      }
      .box{
        position: relative;
        margin: 0 auto;
        width: 300px;
        height: 200px;
        background: cyan;
      }
      li{
        padding-top: 20px;
      }
      .box1{
        padding-top: 20px;
        text-align: center;
        position: relative;
      } 
    style>
head>
<body>
<div class="box" ng-controller="clt">
  <ul>
    <li>卷心菜<input type="text" ng-model="cabbage">li>
    <li>西红柿<input type="text" ng-model="tomatoes">li>
  ul>
  <div class="box1">
    <select name="" ng-model="huobi">
      <option value="rmb">人民币option>
      <option value="dollar">美元option>
    select>
    <input type="button" ng-click="calcSum()" value="计算总价">
  div>
div>
<script>
    var app=angular.module('myapp',[]);
    app.controller('clt',function($scope, currencyFilter){
      $scope.huobi='rmb';
      $scope.calcSum=function(){
        var sum=Number($scope.cabbage)+Number($scope.tomatoes);
        if($scope.huobi=='rmb'){
          alert(currencyFilter(sum,'¥',5));
        }else if($scope.huobi=='dollar'){
          alert(currencyFilter(sum*6.8,'$',1));
        }
      }
    })
script>
body>
html>

温馨提示:记得把自己的angular.min.js包引进来哦!

你可能感兴趣的:(AngularJS)