transferring data from HTML to JavaScript using Angular

Question

transferring data from HTML to JavaScript using Angular

I am working with a JavaScript function that requires a parameter. This parameter needs to be extracted from the HTML in the following format:

<tr  ng-repeat="restaurant in accounts.selectedRestaurants">
  <td>{{restaurant}}</td>
   <td>{{accounts.findAllAccountsByRestaurant(restaurant)}}</td>
</tr>

The function I am using is `accounts.findAllAccountsByRestaurant()` and the parameter it needs is `restaurant`, which is obtained through the `ng-repeat`. How can I successfully pass this parameter to the function? Any help would be greatly appreciated.

javascript angularjs angularjs-scope

Answer 1

Answer №1

give this a try

<body>

<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="item in items">
<td ng-init="displayItem(item)">{{item}}</td>
</tr>
</table>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.items=[1,7,15];
$scope.displayItem= function(data)
 {
 alert(data);
 };
});
</script>
</body>

Answer 2

give this a try

<body>

<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="item in items">
<td ng-init="displayItem(item)">{{item}}</td>
</tr>
</table>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.items=[1,7,15];
$scope.displayItem= function(data)
 {
 alert(data);
 };
});
</script>
</body>

Answer 3

Answer №2

As long as your scope is accurately defined, everything should function smoothly as it currently stands: http://jsfiddle.net/jpwup7Lb/5/

$scope.accounts={
    selectedCustomers:
        ["alpha","beta","gamma"],
    findAllAccountsByCustomer:function(customer){
        return "all accounts for "+customer+" are listed here";
    }
}

Answer 4

As long as your scope is accurately defined, everything should function smoothly as it currently stands: http://jsfiddle.net/jpwup7Lb/5/

$scope.accounts={
    selectedCustomers:
        ["alpha","beta","gamma"],
    findAllAccountsByCustomer:function(customer){
        return "all accounts for "+customer+" are listed here";
    }
}

Answer 5

Answer №3

Give this a shot:

<tr  ng-repeat="shop in accounts.selectedShops">
  <td >{{shop}}</td>
   <td>{{accounts.findShopAccounts(shop)}}</td>
</tr>

Next, add this to your controller

$scope.accounts.findShopAccounts = function(shop) { return alert(shop); };

Answer 6

Give this a shot:

<tr  ng-repeat="shop in accounts.selectedShops">
  <td >{{shop}}</td>
   <td>{{accounts.findShopAccounts(shop)}}</td>
</tr>

Next, add this to your controller

$scope.accounts.findShopAccounts = function(shop) { return alert(shop); };

transferring data from HTML to JavaScript using Angular

Answer №1

Answer №2

Answer №3

Similar questions

Send error messages directly to the client side or retrieve status codes and messages

How to automatically close a Bootstrap modal after submitting a form

Troubleshoot: Issue with Multilevel Dropdown Menu Functionality

extracting the ID from within an iframe

AngularJS single checkbox implementationIncorporating a single checkbox in

Using AngularJS to apply filters to JSON data

Having trouble retrieving returned data after refetching queries using Apollo and GraphQL

Is it possible to incorporate the arrow function within the debounce function?

Can a Node.js application be configured to accept user input from an external text editor?

Host app is failing to render shared components in SSR

"Converting a text into a property that can be

Retrieving the length of a Pipe in the parent component using Angular 2

Update the content of a div element after it has been loaded using the ajax load method

How can I implement "named parameters" in a unique AngularJS filter that I am creating?

provide a promise that resolves to a boolean value

Using regular expressions in Sublime Text 2 to replace text in JSON files can greatly improve your workflow

Simply close by clicking outside using basic vanilla JavaScript

Discover the way to utilize the java enum toString() function in jQuery

Difficulty arises in AngularJS Material when attempting to access the same object value using ng-model and ng-change

Tips for using the ternary operator to fetch data from the Github API with three conditions