Question

我在这个脚本上花了好几个小时，我想通过数据绑定输出文本而不是html中angularjs中select选项的值，但是当我尝试时我总是得到值而不是文本。我怎样才能做到这一点。这是Fiddle

＆＃13;

(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);

＆＃13;

<!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_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}}</strong> with <strong>{{piece}}</strong> pages<div style="color:#D76D25; font-size:24px;">${{calculation}}</div></td>
    </tr>
    </tbody>
    </table>
</form>
</div>
</body>
</html>

＆＃13;

Answer 1

这是您的解决方案，您应该正确定义ng-options

小提琴：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 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.value);
        }
        $scope.calculate();
  }]);
})(window.angular);
</script>

如何在AngularJs中获取选定的选项

1 个答案: