Ways to showcase title using ng-repeat

Question

Ways to showcase title using ng-repeat

<input type="text" ng-model= "name" title="{{name}}">

//this title displays the name that is contained in ng-model

Similarly...

<select title ="{{item.actionId}}" ng-model="item.actionId"> 
<option ng-repeat="action in actionList" value="{{action.ACTION_ID}}">{{action.URL}}</option>
</select>

List of Actions:

$scope.actionList = [{
    "ACTION_ID": 39,
    "URL": "/abc"
  }, {
    "ACTION_ID": 59,
    "URL": "/xyz"
  }];

In this case, item represents the parent list. The title displayed is its ID as the value is the ID. However, we want to retrieve the corresponding URL. How can we do that?

javascript angularjs

Answer 1

Answer №1

The JSON data and code appear to be correct. Feel free to refer to the demo below if you need any further assistance.

DEMO

var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
 $scope.actionList = [{
    "ACTION_ID": 39,
    "URL": "/abc"
  }, {
    "ACTION_ID": 59,
    "URL": "/xyz"
  }];
});

<!DOCTYPE html>
<html>
<head> 
</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
 <div ng-app="myApp" ng-controller="AppCtrl">
  <div class="form-group">
    <select title="{{item.actionId}}" ng-model="item.actionId"> 
<option ng-repeat="action in actionList" value="{{action.ACTION_ID}}">{{action.URL}}</option>
</select>
</div>
 </div>
</body>

</html>

Answer 2

The JSON data and code appear to be correct. Feel free to refer to the demo below if you need any further assistance.

DEMO

var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
 $scope.actionList = [{
    "ACTION_ID": 39,
    "URL": "/abc"
  }, {
    "ACTION_ID": 59,
    "URL": "/xyz"
  }];
});

<!DOCTYPE html>
<html>
<head> 
</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
 <div ng-app="myApp" ng-controller="AppCtrl">
  <div class="form-group">
    <select title="{{item.actionId}}" ng-model="item.actionId"> 
<option ng-repeat="action in actionList" value="{{action.ACTION_ID}}">{{action.URL}}</option>
</select>
</div>
 </div>
</body>

</html>

Answer 3

Answer №2

You can implement ng-options in conjunction with ng-change to record the ids and display the URL in the title

var app = angular.module('app', []);
app.controller('Ctrl', function($scope) {
 $scope.actionList = [{
    "ACTION_ID": 39,
    "URL": "/abc"
  }, {
    "ACTION_ID": 59,
    "URL": "/xyz"
  }];
  $scope.getValues=function(){
  debugger
    $scope.selectedID=$scope.item.ACTION_ID;
    $scope.selectedURL=$scope.item.URL;
    console.log("selectedId:" + $scope.selectedID );
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head> 
</head>

<body>
 <div ng-app="app" ng-controller="Ctrl">
  <div class="form-group">
    <select ng-model="item" ng-change="getValues()" ng-options="action as  action.URL for action in actionList" title="{{selectedURL}}"> 
</select>
</div>
 </div>
</body>

</html>

Answer 4

You can implement ng-options in conjunction with ng-change to record the ids and display the URL in the title

var app = angular.module('app', []);
app.controller('Ctrl', function($scope) {
 $scope.actionList = [{
    "ACTION_ID": 39,
    "URL": "/abc"
  }, {
    "ACTION_ID": 59,
    "URL": "/xyz"
  }];
  $scope.getValues=function(){
  debugger
    $scope.selectedID=$scope.item.ACTION_ID;
    $scope.selectedURL=$scope.item.URL;
    console.log("selectedId:" + $scope.selectedID );
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head> 
</head>

<body>
 <div ng-app="app" ng-controller="Ctrl">
  <div class="form-group">
    <select ng-model="item" ng-change="getValues()" ng-options="action as  action.URL for action in actionList" title="{{selectedURL}}"> 
</select>
</div>
 </div>
</body>

</html>

Answer 5

Answer №3

If you want to achieve this, you can use the following code snippet:

<select ng-model="item" ng-options="action as action.URL for action in 
 actionList" title="{{item.URL}}">

Answer 6

If you want to achieve this, you can use the following code snippet:

<select ng-model="item" ng-options="action as action.URL for action in 
 actionList" title="{{item.URL}}">

Answer 7

Answer №4

It is recommended to utilize ng-option instead of ng-repeat. Also, make sure to always incorporate the track by clause to assign a value in the option list when generating it from an object.

<!DOCTYPE html>
<html>
<body>

<select ng-model="item" ng-options="action as action.URL for action in actionList track by action.URL" >
  <option value="">Volvo</option>
     </select>

</body>
</html>

Answer 8

It is recommended to utilize ng-option instead of ng-repeat. Also, make sure to always incorporate the track by clause to assign a value in the option list when generating it from an object.

<!DOCTYPE html>
<html>
<body>

<select ng-model="item" ng-options="action as action.URL for action in actionList track by action.URL" >
  <option value="">Volvo</option>
     </select>

</body>
</html>

Ways to showcase title using ng-repeat

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Watching the $scope variable using $watch will result in triggering even when ng-if directive is used, displaying

Assign the value of the selected option to the ng-model instead of the displayed text

Having trouble loading an image after successfully connecting to an API with react.js

Having trouble getting the JavaScript slider to animate

Importing D3 data from CSV files using the "%" symbol

Setting the default selection in AngularJS based on the URL entered

What is the most effective way to receive all values sent to an Observer upon a new subscription?

Can you provide me with information on how to retrieve data from a Yahoo Finance JSON file using Node.js?

Tips on successfully passing multiple keys and their associated HTML tag attributes in a React application

Sharing a boolean state between two pages using Material UI components

Every time I try to call the event in jQuery for the second time, it fails to work

String variable representing the name of a React element

What are the best ways to conceptualize the benefits of WebRTC?

The TypeScript error states that the argument type 'string | undefined' cannot be assigned to the parameter type 'string'

The alert function in the Ajax web method is malfunctioning

Setting up a function in React to utilize an image stored in state

Guidelines for invoking a JavaScript function within an AngularJS controller

Retrieving JSON information from the server

Issue encountered with create-next-app during server launch

The <a href="#divtagid"> link is incapable of triggering the opening of the div tag when called from JavaScript