Dejalheure - intranet mockup

by Christian Bonato

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://code.angularjs.org/1.2.9/angular.min.js"></script>
<div class="container" ng-app="myApp">
<div ng-controller="contentcontroller">
    
    <h1>Produit : Steack
    </h1>
    
    
    
<!-- Multiple Checkboxes -->
    
    
    <!-- Text input-->
<div class="form-group col-sm-12">
  <label class="col-md-2 control-label" for="textinput">Prix Produit</label>  
  <div class="col-sm-8 input-group">
  <span class="input-group-addon">&euro;</span>
  <input id="textinput" name="textinput" type="text" placeholder="prix" ng-model="product_price" class="form-control input-md">
  </div>
</div>
    
    
    
<div class="form-group col-sm-12">    
  <label class="col-sm-2 control-label" for="checkboxes">Jeux d’options</label>
  <div class="col-md-10">
  <div class="checkbox">
    <label for="checkboxes-0">
      <input type="checkbox" name="checkboxes" id="checkboxes-0" value="1" ng-model="checkbox_0">
      Cuisson
    </label>
	</div>
  <div class="checkbox">
    <label for="checkboxes-1">
      <input type="checkbox" name="checkboxes" id="checkboxes-1" value="1" ng-model="checkbox_1">
      Garniture
    </label>
	</div>
  <div class="checkbox">
    <label for="checkboxes-2">
      <input type="checkbox" name="checkboxes" id="checkboxes-2" value="1" ng-model="checkbox_2">
      Garniture supplémentaire
    </label>
	</div>
  </div>
</div>
     
    
      
      
    
<form class="form-horizontal col-sm-12">
<fieldset>
    


<!-- Form Name -->
<!-- checkbox_0 (Cuisson) -->    
    <div ng-if="checkbox_0" style="/* border:1px solid red; */">  
    
<legend>Cuisson</legend>

     
<!-- Multiple Radios -->
<div class="form-group">
  <label class="col-sm-4 control-label" for="radios">Choix</label>
  <div class="col-sm-4">
    <div class="radio">
    <label for="radios-0">
    ...

JavaScript

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

app.controller('contentcontroller', function($scope) {
    
    $scope.product_price = parseFloat(11.50);

    
 $scope.addition = function(amount1, amount2)
 {
     
     parseFloat($scope.product_price) =+ parseFloat(amount2);
     // result = Number(amount1)+Number(amount2);
// return result;
 }
    

$scope.checkbox_0 = false;
$scope.checkbox_1 = false;
$scope.checkbox_2 = false;
    
    $scope.generic_placehoder = "prix";
    
    
    $scope.optionsset_0 = {};
    $scope.optionsset_1 = {};
    $scope.optionsset_2 = {};
    
    $scope.optionsset_0.mandatory = 1;
    $scope.optionsset_1.mandatory = 1;
    $scope.optionsset_2.mandatory = 2;

    $scope.optionsset_0.choices = [
        {
            name:"Bleu",
            price: '',
            price_setting: "rewrites"
        },
        {
            name:"Saignant",
            price: '',
            price_setting: "rewrites"
        },
        {
            name:"À point",
             price: '',
            price_setting: "rewrites"
       },
    ];
    
    $scope.optionsset_1.choices = [
        {
            name:"Frites",
            price: '',
            price_setting: "rewrites"
        },
        {
            name:"Salade",
            price: '',
            price_setting: "rewrites"
        },
        {
            name:"Haricots verts",
            price: '',
            price_setting: "rewrites"
        },
    ];
    
        $scope.optionsset_2.choices = [
        {
            name:"Frites",
            price: '',
            price_setting: "adds"
        },
        {
            name:"Salade",
            price: '',
            price_setting: "adds"
        },
        {
            name:"Haricots verts",
            price: '',
            price_setting: "adds"
        },
    ];
    
    

 $scope.radios_0 = 1;  
 $scope.radios_1 = 1;  

});