How can Angular's as-syntax be used to access the selected object?

Question

How can Angular's as-syntax be used to access the selected object?

When using syntax like

ng-options="p.id as p.name for p in options"

to select options, I encounter an issue. I require access to the variable p as well. This is necessary for displaying additional labels near inputs or buttons, or even making changes to inputs.

The limitation is that I am only able to set the id property. One potential solution could involve using a separate variable and updating the id with $watch. However, this approach may lead to complications as all elements would need to be synchronized.

Are there any solutions available for addressing similar problems?

Plnkr: http://plnkr.co/edit/7LStlQnkVGBjwsI3d9NO?p=preview

javascript angularjs

Answer 1

Answer №1

here is what you're looking for

the model will represent the ID:

<div ng-init="init();">
    <select ng-model="model" ng-options="o.id as o.label for o in options"></select>
    <span>Your data is: {{model}}</span>
</div>

now, the model will contain a complex data object:

<div ng-init="init();">
    <select ng-model="model" ng-options="o as o.label for o in options"></select>
    <span>Your data is: {{model.data}}</span>
</div>

Answer 2

here is what you're looking for

the model will represent the ID:

<div ng-init="init();">
    <select ng-model="model" ng-options="o.id as o.label for o in options"></select>
    <span>Your data is: {{model}}</span>
</div>

now, the model will contain a complex data object:

<div ng-init="init();">
    <select ng-model="model" ng-options="o as o.label for o in options"></select>
    <span>Your data is: {{model.data}}</span>
</div>

How can Angular's as-syntax be used to access the selected object?

Answer №1

here is what you're looking for

Similar questions

Error in React Material UI: 'theme' variable is not defined - no-undef

What precautions should I take to safeguard my HTML/CSS/JS projects when sharing a link with my employer?

Excess space at the bottom of the Heatmap chart in Highcharts

What is the best way to input information into my Google spreadsheet with React JS?

Exploring the potentials of VivagraphJS alongside WebGL and the magic of event listeners

What is the reason javascript struggles to locate and replace strings with spaces in a URL?

Manage YouTube video played within html code

AngularJS Google Chart: Customize pie chart tooltip to exclude percentage

Error message: "Window is not defined in Next.js"

Exploring the applications of the `this` keyword within a jQuery-based JavaScript object

Creating an object using JSON and implementing custom methods in Javascript

Execute and showcase code without redundancies

CSS - Absolute positioning appears to be slightly choppy in Microsoft Edge

dividing an HTML string into individual variables using JavaScript

Next.js data response not found

Autocomplete for Converting Postal Codes to Cities

Enhancing presentation with a multitude of pictures

Tips for overcoming indentation issues using ESLint?

Incorrect camera overlay dimensions causing device rotation issue

unable to retrieve the value of the table row with a particular class designation