CODEWITHSUNDEEP
angularjs
Samantha J T Star
Samantha J T Star

Reputation: 32838

How can I populate a SELECT in a data grid?

I have this object:

phraseFormId = [
    {
        id: 1,
        name: 'Word'
    }, {
        id: 2,
        name: 'Sentence'
    }
];

What I would like to do is to change this read only row.formId to be a SELECT element where it will display and where I can choose new values:

<div>
    <div>{{ row.formId}}</div>
</div>

Can anyone give me some ideas how I can do this?

Thanks

Upvotes: 0

Views: 43

Answers (2)

Kunal Mazumdar
Kunal Mazumdar

Reputation: 73

Certainly not sure, what exactly you are looking for but have a look on this fiddle, simple enough to start with. Let me know, if your problem statement is different.

Using

ng-repeat

Fiddle: http://jsfiddle.net/U3pVM/26336/

Upvotes: 1

mhodges
mhodges

Reputation: 11126

It is a little unclear exactly what you are asking for, but I think I may have found a solution.

Here is a DEMO

Let me know if this is what you were looking for!

It utilizes ng-options with select to create a dropdown with values that will bind to a model property

Html

<div ng-repeat="item in phraseFormId">
    <h4 ng-bind="'Item ' + $index"></h4>
    id: {{item.id}}<br>
    name: {{item.name}}<br>
    formId: 
    <select ng-model="item.formId" ng-options="id for id in formIds"></select>
</div>

Controller

$scope.formIds = [1,2,3];
$scope.phraseFormId = [
    {
      id: 1,
      formId: 1,
      name: 'Word'
    }, {
      id: 2,
      formId: 2,
      name: 'Sentence'
    },
    {
      id: 3,
      formId: 1,
      name: 'Paragraph'
    }, {
      id: 4,
      formId: 3,
      name: 'Sentence'
    }
];

Upvotes: 0

Related Questions