Why is the H1 tag not generating a new line?

Asked

Viewed 85 times

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 the tags html with javascript and using bootstrap as framework, but the second tag <h1> not going for a new line, you can see the example here: http://jsfiddle.net/92z54z04/909/

javascript bootstrap angular

  • In the second item of your arrray date the property colValue estác om col-Xs-4, you have to increase this value in order to descend the next item or you can create a new Row to contain the next item.

  • @Felipecoelho you could ask as the answer to the question to be more visible to other people who have the same mistake.

2 answers

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>
  <script src="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>

<body ng-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>

Put the ng-repeat in the same div that receives the 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>

0

I believe you want to take up 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 take up 12 spaces

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

Browser other questions tagged javascript bootstrap angular

You are not signed in. Login or sign up in order to post.