Create title in Angular

Question

There was a difficulty in creating an informative headline. Here's what I got:

productController.prototype.createHeader = function (data) {
  var viewModel = this;
  if (data != null)  {
   viewModel.header = "Product: " + data.product + " " + "Type: " + data.type + " " + "Count: " + data.count;
  }
}

<div ng-controller="productController">
   <input type="text" ng-model="productId" />
   <input type="submit" ng-click="product.search(productId)" />
   <strong> {{product.header}} </strong>
</div>

That I received:

Product: Samsung Type: Phone Count: 5

That I wanted to get:

Product: Samsung Type: Phone Count: 5

The header should be loaded dynamically, the "product", "type" and "quantity" fields should not hang static on the form. Example:

Ptoduct: <strong>{{product.header.product}}</strong>

I ask to help with stylization, or to prompt in what direction to dig. I know that in jQuery there are methods "bold" and "big"

All you need to do is amend the `viewModel.header` to have the `` tags around the relevant values — Rory McCrossan, Oct 17 '17 at 14:36
Instead of using a string you should use an object with several properties: `product`, `type`, ... and you'll could use several `strong`. — ADreNaLiNe-DJ, Oct 17 '17 at 14:37
@ADreNaLiNe-DJ, How then to make so that the heading would be displayed, only after pressing the button, instead of stored on the form "product", "type" and "count"? Use toggle? — Tibomso, Oct 17 '17 at 15:23
Perhaps my problem can be solved somehow more correctly? I just basically do back-end — Tibomso, Oct 17 '17 at 15:25

DreamWave · Answer 1 · 2017-10-17T20:29:18.650

You have two choices: Either send the data bolded like this:

viewModel.header = "Product: <span style='font-weight:bold;'>" + data.product + "</span> "
                    + "Type: <span style='font-weight:bold;'>" + data.type + "</span> "
                    + "Count: <span style='font-weight:bold;'>" + data.count + "</span>";

In order to display the information in the target field, you need to use it as:

<div ng-bind-html="header"></div>

You can read more in this question

Or create more elements inside your HTML and split the data:

<div ng-controller="productController">
   <input type="text" ng-model="productId" />
   <input type="submit" ng-click="product.search(productId)" />
   <div> Product: <span style="font-weight:bold;">{{header.product}}</span> Type: <span style="font-weight:bold;">{{header.type}}</span> Count: <span style="font-weight:bold;">{{header.count}}</span>  </div>
</div>

And then send the object to the DOM:

productController.prototype.createHeader = function (data) {
  var viewModel = this;
  if (data != null)  {
   viewModel.header = data;
  }
}

The first I tried and I got the same as you: `Product: Samsung Type: Phone Count: 5`. Probably have to use the second option — Tibomso, Oct 17 '17 at 15:16
@Tibomso I extended my answer. In order to use html from javascript inside html you need the attribute ng-bind-html. — DreamWave, Oct 17 '17 at 20:30

score 0 · Answer 2 · answered Oct 17 '17 at 14:38

All you need to do is amend the viewModel.header to have the <strong> tags around the relevant values:

productController.prototype.createHeader = function (data) {
  var viewModel = this;
  if (data != null)  {
   viewModel.header = `Product: <strong>${data.product}</strong> Type: <strong>{data.type}</strong> Count: <strong>{data.count}</strong>`;
  }
}

<div ng-controller="productController">
   <input type="text" ng-model="productId" />
   <input type="submit" ng-click="product.search(productId)" />
   {{product.header}}
</div>

Thanks , I did not know that in Angular there is interpolation of lines, but I also wanted to do it from the beginning, and this option does not work. `Product: Samsung Type: Phone Count: 5 ` — Tibomso, Oct 17 '17 at 15:12

score 0 · Accepted Answer · answered Oct 17 '17 at 16:42

Solved the problem with ng-show

<div ng-show="product.show">
    <p>Product: <strong>{{product.product}}</strong> Type: <strong>{{product.type}}</strong> Count: <strong>{{product.count}}</strong></p>
</div>

Controller:

viewModel.link = function () {
    viewModel.show = !viewModel.show;
    viewModel.createHeader(data);
}

Function:

productController.prototype.createHeader = function (data) 
{
   var viewModel = this;
   if (data != null) {
      viewModel.product = data.product;
      viewModel.type = data.type;
      viewModel.count = data.count;
   }
}

Create title in Angular

3 Answers3