Why is h1 tag not generating a new line?

Question

Why is h1 tag not generating a new line?

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

$scope.html = [{
    "name": "teste",
    "data": [{
            "tag": {
                "name": "h1",
                "text": "Titulo 1",
                "colValue": ""
            }
        },
        {
            "tag": {
                "name": "text",
                "colValue": "col-xs-4"
            }
        }, {
            "tag": {
                "name": "h1",
                "text": "Titulo 2",
                "colValue": ""
            }
        },
        {
            "tag": {
                "name": "text",
                "colValue": "col-xs-4"
            }
        },
        {
            "tag": {
                "name": "text",
                "colValue": "col-xs-8"
            }
        }
    ]
}, {
    "name": "teste",
    "data": [{
            "tag": {
                "name": "h1",
                "text": "Titulo 3",
                "colValue": ""
            }
        },
        {
            "tag": {
                "name": "text",
                "colValue": "col-xs-4"
            }
        }
    ]
}];

I'm dynamically generating tags html with javascript and using bootstrap as framework , however the second <h1> tag is not going to a new line, you can see the example here: link

javascript angular bootstrap

asked by anonymous 16.03.2018 / 19:40

2 answers

I can not change the collate of my column in mysql to utf8_general_ci Debug with Flask / Python

score 1 · Answer 1

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

mymodal.controller('MainCtrl', function($scope) {

  $scope.html = [{
    "name": "teste",
    "data": [{
        "tag": {
          "name": "h1",
          "text": "Titulo 1",
          "colValue": ""
        }
      },
      {
        "tag": {
          "name": "text",
          "colValue": "col-xs-4"
        }
      }, {
        "tag": {
          "name": "h1",
          "text": "Titulo 2",
          "colValue": ""
        }
      },
      {
        "tag": {
          "name": "text",
          "colValue": "col-xs-4"
        }
      },
      {
        "tag": {
          "name": "text",
          "colValue": "col-xs-8"
        }
      }
    ]
  }, {
    "name": "teste",
    "data": [{
        "tag": {
          "name": "h1",
          "text": "Titulo 3",
          "colValue": ""
        }
      },
      {
        "tag": {
          "name": "text",
          "colValue": "col-xs-4"
        }
      }
    ]
  }];
});

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><scriptsrc="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script></head><bodyng-app="mymodal" ng-controller="MainCtrl">

  <div class="container">
    <pre>{{ tags | json }}</pre>
    <div ng-repeat="(i, h) in html">
      <div class="well">ROW {{ i + 1 }}</div>

      <div class="row" ng-repeat="(i, t) in h.data">
        <h1 ng-if="t.tag.name == 'h1'">{{ t.tag.text }}</h1>
        <div class="form-group {{ t.tag.colValue }}" ng-if="t.tag.name !== 'h1'">
          <div ng-if="t.tag.name == 'text'">
            <label for="$index">{{ t.tag.name }}</label>
            <input type="text" id="$index" class="form-control" disabled/>
          </div>
        </div>
      </div>
    </div>

</body>

</html>

Place ng-repeat in same div that receives class row

<div class="row" ng-repeat="(i, t) in h.data">
   <h1 ng-if="t.tag.name == 'h1'">{{ t.tag.text }}</h1>
     <div class="form-group {{ t.tag.colValue }}" ng-if="t.tag.name !== 'h1'">
       <div ng-if="t.tag.name == 'text'">
          <label for="$index">{{ t.tag.name }}</label>
            <input type="text" id="$index" class="form-control"  disabled/>
       </div>            
     </div>
</div>

score 0 · Answer 2

I think you want to occupy all the space since the bootstrap divides into 12 columns for a column to go down as if it were a row (row) the column should occupy 12 spaces

        {
        "tag": {
            "name": "text",
            "colValue": "col-xs-12"
        }
    },