if statement for a method within the ng-click directive

Whenever I click the button, I want to either execute createRole() if RoleName is not set or EditRole() method if RoleName is set. However, for some reason, EditRole() is being executed for both cases.

<button type="submit" ng-click="selectedItem.RoleName? EditRole() : createRole()">Save Changes</button>

Answer №1

<button type="submit" ng-click="save()">Save Changes</button>

Within the controller:

 $scope.save = function(){

    if($scope.selectedItem.RoleName){
        EditRole() 
    }
    else{
        createRole()
    }

 }

Answer №2

Perhaps a more effective approach could be

<button type="submit" ng-click="validateAndSave(selectedItem.RoleName)">Update Role</button>

$scope.validateAndSave = function(role) {
  if (role) { // check if role exists
    updateRole();
  } else {
    createNewRole(); // create new role if name is not set
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for capturing the current terminal content upon keypress detection?

After successfully installing the terminal on a test page, I am looking to highlight matching parentheses within it. This is similar to what is done in this example: I have a working solution in place and now need to integrate it with the terminal. ...

What is the best method for injecting a factory dependency into an angular controller?

Situation:- I have a factory named testFactory. Up until now, I was defining my controller like this: app.controller('testCtrl',function($scope,testFactory) { testFactory.Method1(){ //working fine} } However, before minimizing the file, I def ...

Using es6 map to deconstruct an array inside an object and returning it

I am looking to optimize my code by returning a deconstructed array that only contains individual elements instead of nested arrays. const data = [ { title: 'amsterdam', components: [ { id: 1, name: 'yanick&a ...

Remove an owl carousel using Laravel, Vue.js, and Axios

I've implemented a sleek slider on my website to showcase images with accompanying text to visitors. The slider utilizes owl carousel within a vue component and is functioning properly. Now, I'm attempting to add a delete button so that users who ...

What could be the reason for the child element not occupying the full height of its parent container?

* { padding: 0; margin: 0; box-sizing: border-box; } body { margin: 50px; } .navbar { display: flex; align-items: center; justify-content: center; color: darkgreen; font-family: 'Vollkorn', serif; font-size: 1.2rem; font-w ...

tips for utilizing namespaced getter filtering within a Vuex module in vueJs

In my custom module named ShopItemCategory, I have a Getter getters: { shopItemsCategories: state => state.ShopItemsCategories.data, }, Inside the component, there is a computed function I defined computed: { shopItemsCategories ...

What is the best way to display a chosen item in a text input field?

https://i.stack.imgur.com/Qe5Ds.png Looking to create a similar design, but lacking the necessary expertise. What steps should I take or what is the specific term for this style? Seeking assistance in implementing this using jQuery, PHP, or JavaScript. A ...

Issue with npm installation leading to missing node_modules directory

When attempting to run npm install . in a local directory, I keep encountering the following errors: npm ERR! install Couldn't read dependencies npm ERR! Darwin 15.2.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "." npm ERR! no ...

Differentiating between swipe and click actions within Angular applications

Utilizing ng-click to display item details in a list while also implementing a jQuery mobile swipe event on the list item to reveal a delete button when swiped left has presented an issue. The problem arises when swiping triggers both the swipe event and a ...

Tips for displaying filtered items on the MongoDB terminal

I have objects categorized by cost and date of addition, each user having such categories. My goal is to display all categories for the month "08" in the console. How can I achieve this? Currently, my code retrieves the entire object with the user informat ...

Manipulating AngularJS variables that are outside of its designated scope should be restricted

Something strange is happening in my code. I created a function called "insertTstData" outside of any angular scope, and when it is called from another function named "save" within a controller named "remark", it somehow manipulates a local variable and th ...

I am looking to showcase the information from two separate collections

I am looking to display data from two separate mongoose collections. I have a Member collection and a Property collection. Below is my code for fetching the data: const Property = require('../models/propsSchema') const Members = require(&apo ...

What is the jQuery method for generating a new element?

Is this the correct way to create an element: $('<div />') or $('<div></div>') Can you confirm if this is the proper syntax for creating an element? Thank you. ...

Forwarding the geographic coordinates directly to the system's database

I have a unique script that retrieves the precise latitude and longitude position. It then automatically sends this data to a database without the need for user input. <script> function getPosition(position) { var latitude = position.coor ...

Interpret a JavaScript array response

Currently, I am working on an API request where I receive an HTTP response that contains an array with a single JSON object. However, when attempting to parse or stringify it using the following code: var response = http.response; try{ var json = J ...

Will this folder organization be appropriate for an AngularJS application?

Hello, I currently have an angularJS file structure that looks like this: project/ -bin -model -node_modules -public -routes -views app.js, package.json, package-lock.json Within the public folder, there are: -images -javascripts -stylesheets I ...

What is the best way to create fading text effects in an AngularJS application?

Running an AngularJS web application that showcases three words for 5 seconds each: Hello, World & Goodbye. The controller setup is as follows: self.currentIndex = 0; self.myTexts = ['Hello', 'World', 'Goodbye']; self.cu ...

using angularjs to dynamically apply css styles

Below is the input I have: The HTML code is shown below: <input type="number" ng-class="{negative: amount < 0}" ng-model="amount"/> This is the corresponding CSS code: .negative { color: red; } If the amount is positive, no specif ...

Unable to access the newly created object's properties following the instantiation of a new resource in AngularJS

Currently, I am in the process of developing a new Resource utilizing AngularJS that falls under the category of Person. After successfully creating this resource, my goal is to retrieve the id associated with the new resource from the server. it('sh ...

Show alerts that automatically disappear after a set amount of time

I have successfully implemented code that displays alerts for a specific period of time, indicated by (alert alert-warning). Additionally, I want to display another type of alert, (alert alert-success), for a certain amount of time, after which the page sh ...