kikuyu1 February 2016

How to get a selected option in AngularJs

I have spent hours on this script, I want to output the text and not the value of a select option in angularjs in html by data binding, but when I try I'm alway getting the value and not the text. How can I accomplish this. Here is the Fiddle

(function(angular) {
  'use strict';
angular.module('formExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
$scope.typeofwritings = [{
			value: '5',
			text: 'Writing from scratch'
		  }, {
			value: '3',
			text: 'Editing or Proofreading'
		  }
		  ]; 
$scope.type_writing = $scope.typeofwritings[0].value;
	$scope.pieces = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
$scope.piece = 1;	  
		$scope.calculate = function(){
		$scope.calculation =  ($scope.piece * $scope.type_writing);
		}
		$scope.calculate();
  }]);
})(window.angular);
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Return selected input in Angular Js</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="app.js"></script>

<body ng-app="formExample">
<div ng-controller="ExampleController">
<form name="form" novalidate action="formsubmitted.php" method="post">
<table width="465" border="0">
  <tbody>
    <tr>
      <td width="186"><label for="type_writing">Type of Writing:</label></td>
      <td width="269"><select ng-change="calculate()" ng-model="type_writing" ng-options="o.value as o.text for o in typeofwritings" ng-init="type_writing='5'" name="type_writing" id="type_w        

Answers


Bob van Luijt February 2016

Here is your solution, you should properly define your ng-options

Fiddle: https://jsfiddle.net/4zj4a9z7/2/

<title>Return selected input in Angular Js</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="app.js"></script>

<body ng-app="formExample">
<div ng-controller="ExampleController">
<form name="form" novalidate action="formsubmitted.php" method="post">
<table width="465" border="0">
  <tbody>
    <tr>
      <td width="186"><label for="type_writing">Type of Writing:</label></td>
      <td width="269"><select ng-change="calculate()" ng-model="type_writing" ng-options="o as o.text for o in typeofwritings" ng-init="type_writing='5'" name="type_writing" id="type_writing">
      </select>
      </td>
    </tr>
    <tr>
      <td><label for="num_pieces">Number of Pieces:</label></td>
      <td><select ng-change="calculate()" ng-model="piece" ng-options="o as o for o in pieces" name="num_pieces" id="num_pieces"></select></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><strong>Order Cost</strong> For <strong>{{type_writing.text}}</strong> with <strong>{{piece}}</strong> pages<div style="color:#D76D25; font-size:24px;">${{calculation}}</div></td>
    </tr>
    </tbody>
    </table>
</form>
</div>
</body>


<script>
(function(angular) {
  'use strict';
angular.module('formExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
$scope.typeofwritings = [{
            value: '5',
            text: 'Writing from scratch'
          }, {
            value: '3',
            text: 'Editing or Proo 

Post Status

Asked in February 2016
Viewed 2,836 times
Voted 9
Answered 1 times

Search




Leave an answer