JSFiddle - React, Tailwind, and code Playground

by Gisele Lima

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-app="icmssProdutos" ng-controller="IcmssProdutosController">
{{selecionados}}
  <div ng-repeat="icms in ICMSs">
    <div class="jumbotron">
        <div class="container">
          <div class="col-md-12">
            <button style="float:right " type="button" class="btn btn-danger" ng-click="removerIcms(icms)">x</button>
          </div>
          <div class="row">
            <div class="col-md-4">
              <label for="ex2">Regime</label>
              <select class="form-control" ng-model="selected.regime" ng-options="r.regime for r in data track by r.id">
                <option value="">Selecione o Regime</option>
              </select>
            </div>
            <div class="col-md-4">
              <label for="ex2" ng-if="selected.regime">Situação Tributária
                <select class="form-control" ng-if="selected.regime" ng-model="selected.situacao" ng-options="s.situacao for s in selected.regime.SituacaoTributaria track by s.value">
                  <option value="">Selecione a Situação Tributária</option>
                </select>
              </label>
            </div>
            <div class="col-md-4">
              <label for="ex2" ng-if="selected.regime">Origem
                <select class="form-control" ng-model="selected.Origem" ng-options="o.Origem for o in selected.regime.Origens track by o.value">
                  <option value="">Selecione a Origem do Produto</option>
                </select>
              </label>
            </div>
          </div>
          <div class="col-md-12" ng-if="selected.situacao">
            <div class="col-md-6">
              <h2>ICMS</h2>
              <label for="ex2" ng-if="selected.situacao.value == 00 || selected.situacao.value == 10">Modalid. de Determ. da BC ICMS
                <select...

JavaScript

var CadastroICMSProduto = angular.module('icmssProdutos', []);

CadastroICMSProduto.controller('IcmssProdutosController', ['$scope', '$location', function($scope, $location) {

  $scope.selected = {};
  $scope.ICMSs = [{}];
  $scope.selecionados = [];

  $scope.IncluirICMS = function() {
    $scope.selecionados.push(angular.copy($scope.selected));
    $scope.selected = {};
  }

   $scope.data = [{
    "id": "0",
    "regime": "Tributação Normal",
    "SituacaoTributaria": [{
			"value": 00,
			"situacao": "00 - Tributada Integralmente"
		}, {
			"value": 10,
			"situacao": "10 - Tributada com Cobrança de ICMS por ST"

		}, {
			"value": "10-1",
			"situacao": "10 - Tributada com Cobrança de ICMS por ST (Com partilha de ICMS entre a UF de Origem e a UF de Destino Ou a UF definida na Legislação)"
		  
		}, {
			"value": 20,
			"situacao": "20 - Com redução de base de cálculo "
			
		}, {
			"value": 30,
			"situacao": "30 - Isenta ou não tributada e com cobrança do ICMS por substituição tributária"	  
		}, {
			"value": 40,
			"situacao": "40 - Isenta "	  
		}, {
			"value": 41,
			"situacao": "41 - Não tributada"	  
		},{
			"value": 41-1,
			"situacao": "41 - Não tributada (ICMSST devida para a UF de destino, nas operações interestaduais de produtos que tiverem retenção antecipada de ICMS por ST na UF do remetente)"	  
		}],
    "Origens": [{
			"value": 0,
			"Origem": "0 - Nacional - Exceto as indicadas nos códigos 3,4,5 e 8"	  
		}, {
			"value": 1,
			"Origem": "1 - Estrangeira - Importação Direta"	  
		}, {
			"value": 2,
			"Origem": "2 - Estrangeira - Adq. no mercado interno"	  
		}, {
			"value": 3,
		  "Origem": "3 - Nacional - com Conteúdo de Importação superior a 40% e inferior ou igual a 70%"	  
		}, {
			"value": 4,
			"Origem": "4 - Nacional - cuja produção tenha sido feita em conformidade"	  
		}, {
			"value": 5,
		  "Origem": "5 - Nacional - com Conteúdo de Importação inferior ou igual a 40%"
		  
		}, {
			"value": 6,
			"Origem": "6 -...