getting the ng-object selected with ng-change

Getting the Picked ng-object with ng-change

🤔 So, you're trying to figure out how to get the selected ng-object when using the ng-change directive. It seems like you want to access both size.name and size.code in your controller when the ng-model gets updated. Don't worry, I've got your back! 😎

The Scenario

Let's say you have a select element with the following code:

<select ng-options="size.code as size.name for size in sizes" 
        ng-model="item.size.code" 
        ng-change="update(MAGIC_THING)">
</select>

You've bound ng-options to iterate over an array called sizes and display the size.name for each option. The ng-model is set to item.size.code, and you want to capture the change event with ng-change and pass something (the MAGIC_THING) to get the currently selected size and its associated properties.

The Solution

To achieve this, you can modify the ng-change expression to pass the ng-model itself (item.size.code) or the entire ng-model object (item.size). Let me explain both options:

Option 1: Passing item.size.code

<select ng-options="size.code as size.name for size in sizes" 
        ng-model="item.size.code" 
        ng-change="update(item.size.code)">
</select>

Here, we are passing item.size.code directly to the update() function in the controller. This value will represent the currently selected code. In your controller, you can use this value to find the corresponding size object and access the desired properties (size.name and size.code).

Option 2: Passing item.size

<select ng-options="size.code as size.name for size in sizes" 
        ng-model="item.size.code" 
        ng-change="update(item.size)">
</select>

With this option, we are passing the entire item.size object to the update() function. In your controller, you can directly access the name and code properties of the size object without further processing or searching.

The Right Way

Both options mentioned above are valid and can work, depending on your specific needs. When deciding which approach fits your situation, it's essential to consider the level of complexity and data structure in your application.

If you only require the size.code for your logic, go with Option 1. On the other hand, if you need multiple properties from the size object, Option 2 can be more convenient.

Your Turn!

Now that you have the solution to your ng-change conundrum, why not give it a try? Implement the changes in your code and see how it works for you.

👇 If you have any questions, comments, or other experiences to share, feel free to leave them below. Happy coding! 👇