CODEWITHSUNDEEP
javascriptangularjs
user5313331
user5313331

Reputation:

Assign ng-model input value from a different object

I have a form with input values assigned to an ng-model that i'm trying to assign pre-defined values with the value attribute:

<input type="hidden" value="{{oneevent.date}}"  ng-model="onebooking.date"/>
<input type="hidden" value="{{oneevent.title}}" ng-model="onebooking.name"/>
<input type="hidden" value="{{oneevent._id}}"   ng-model="onebooking.owner"/>

But is not working at all. The oneevent object exists in the same $scope as onebooking

When the user clicks the submit button, i want create a new booking, but i need get the properties date, title and _id from oneevent, for example:

<form class="expanded-form">
   <input type="hidden" value="{{oneevent.date}}"  ng-model="onebooking.date"/>
   <input type="hidden" value="{{oneevent.title}}" ng-model="onebooking.name"/>
   <input type="hidden" value="{{oneevent._id}}"   ng-model="onebooking.owner"/>
   <label class="expanded-label"> Nome: * </label>
   <input class="expanded-input" type="text" ng-model="onebooking.name">
   <label class="expanded-label"> E-mail: * </label>
   <input class="expanded-input" type="email" ng-model="onebooking.email">
   <label class="expanded-label"> Telefone: * </label>
   <input class="expanded-input" type="text" ng-model="onebooking.phone">
   <label class="expanded-label"> Participantes: * </label>
   <input class="expanded-input" type="number" min="1" ng-model="onebooking.participants">
   <label class="expanded-label"> Observações: (Opcional) </label>
   <textarea class="expanded-input" ng-model="onebooking.obs"></textarea>
</form>

When the user clicks the submit button I'll create a new onebooking, but there are three properties that I need to inherit from the oneevent that will own the onebooking

Upvotes: 1

Views: 237

Answers (4)

Nayan Patel
Nayan Patel

Reputation: 1761

Write it in the model class itself where you are binding the values- Like i have binded the 'promoStartDate' to 'clawbackEffectiveDate'.

No change on the form input tag-

<input  type="date" name="clawbackEffectiveDate" class="form-control" value="{{promoModel.promoStartDate}}" style=" width: 80%" placeholder="Clawback Effective Date" [(ngModel)]=promoModel.clawbackEffectiveDate >

So now once you enter the promostartdate the value can be seen in the clawbackEffectiveDate input.

export class PromoModel {

  public promoStartDate: String;
  public clawbackEffectiveDate: String=this.promoStartDate;
}

Upvotes: 0

user1169526
user1169526

Reputation: 161

I would fix it as follow:

In your Controller

$scope.submitFunction = function(oneevent, onebooking) {
    onebooking.date = oneevent.date;
    onebooking.name = oneevent.title;
    onebooking.owner = oneevent._id;

    // All other operations that you'll need to perform to submit

}

In Your html

<input type="submit" ng-click="submitFunction(oneevent, onebooking)">

Upvotes: 0

Jan
Jan

Reputation: 5815

You could use ng-init to assign the value from another object/model

<input type="hidden" ng-init="onebooking.date=oneevent.date"  ng-model="onebooking.date"/>
<input type="hidden" ng-init="onebooking.name=oneevent.title" ng-model="onebooking.name"/>
<input type="hidden" ng-init="onebooking.owner=oneevent._id"   ng-model="onebooking.owner"/>

For an example of ng-init in action (not this exact code though) see http://jsfiddle.net/9anjjfbz/

Upvotes: 1

MACMAN
MACMAN

Reputation: 1971

Add to $scope from controller.

Upvotes: 0

Related Questions