How can i display Array values in a single text box using Angular Js?

Question

I'm displaying list of values fetched from DB. One of its attributes is array. I handled it using table as below,

<tr>
  <td>{{movId}}</td>
  <td>{{movtitle}}</td>
  <td>
    <ul>
      <li ng-repeat="mem in mov.cast>{{mem}}</li>
    </ul>
  </td>
</tr>

But i've changed it to display in text box instead of table so that i can edit as below,

<input type="text" ng-value="movId">
<input type="text" ng-value="movtitle">

I don't know how to display array attribute ("Cast") in text box

How to attain this...Hope it is possible...if not any alter way to handle it??

@NikosParaskevopoulos M not gona type in UI mate...rather i would like to display in UI. — Vino Spartan
– Vino Spartan, Commented Mar 30, 2015 at 8:13

Tony Barnes · Accepted Answer · 2015-03-30 08:14:39Z

1

You can use ng-model:

<input type="text" ng-value="movie.movTitle" ng-model="movie.movTitle"/>

I don't know how your data is structured exactly, but you could do it like this:

$scope.movies = [
    {
        movId:1234,
        movTitle:'gone with the wind',
        cast:[
            'bill',
            'ben',
            'bart'
       ]
    }
]

HTML:

<table ng-repeat="movie in movies">
  <tr>
      <td>
          <input type="text" ng-value="movId" ng-model="movie.movId"/>
      </td>
      <td>
          <input type="text" ng-value="movie.movTitle" ng-model="movie.movTitle"/>
      </td>
  </tr>
  <tr>
      <td ng-repeat="item in movie.cast">
          <input type="text" ng-value="item" ng-model="item"/>
      </td>
  </tr>

</table>

Demo

answered Mar 30, 2015 at 8:14

Tony Barnes

2,6431 gold badge21 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Vino Spartan Over a year ago

Thnks mate..that resolved the prob. But the 4 text boxes are listed horizontally if cast has 4 values. I want it to be vertical..i used <br> --not working!?

Tony Barnes Over a year ago

@VinoSpartan you're welcome - please accept the answer :) To display the cast vertically, you could use the ng-repeat in the table row rather than the table cell. EG: jsfiddle.net/x3y9p0s2/1

Vino Spartan Over a year ago

No i can't use it so. Because i've one more <td>'s for all to display what it is... Ex : <tr> <td>Cast Details></td> <td><input type="text" ng-value="item" ng-model="item"/></td> </tr> If i replace ng-repeat n place in tr means i'll get tf--> Cast Details as much times as values in UI

Tony Barnes Over a year ago

@VinoSpartan I'm not sure what you mean exactly, if you get an example up I can take a look.

Vino Spartan Over a year ago

Actually for prob point of view i missed a td in my question. Original code is

<tr>      <td>Cast Details</td>      <td ng-repeat="item in cast"><input type="text" ng-value="item" ng-model="item"/></td>

So as you suggested, if i replace the ng-repeat to my <tr> then my first <td>Cast Details</td> also will display many times as much as item value

Collectives™ on Stack Overflow

How can i display Array values in a single text box using Angular Js?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related