Как получить выбранную опцию в AngularJs

-1

Я потратил часы на этот скрипт, я хочу вывести текст, а не значение опции select в angularjs в html привязкой данных, но когда я пытаюсь, я всегда получаю значение, а не текст. Как я могу это сделать. Вот Fiddle Как получить выбранную опцию в AngularJs

(function(angular) { 
 
    'use strict'; 
 
angular.module('formExample', []) 
 
    .controller('ExampleController', ['$scope', function($scope) { 
 
$scope.typeofwritings = [{ 
 
\t \t \t value: '5', 
 
\t \t \t text: 'Writing from scratch' 
 
\t \t }, { 
 
\t \t \t value: '3', 
 
\t \t \t text: 'Editing or Proofreading' 
 
\t \t } 
 
\t \t ]; 
 
$scope.type_writing = $scope.typeofwritings[0].value; 
 
\t $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; \t 
 
\t \t $scope.calculate = function(){ 
 
\t \t $scope.calculation = ($scope.piece * $scope.type_writing); 
 
\t \t } 
 
\t \t $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_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>

источник

2016-02-08 kikuyu1

Можете ли вы уточнить, где именно вы находитесь пытаясь вывести что? – Huangism

Демонстрация, похоже, работает нормально. Проблема не совсем понятна – charlietfl

Я хочу, чтобы опция была выбрана для первого выбора. На этой строке 'Стоимость заказа Для {{type_writing}} с {{кусок}}' Я получаю значение, в то время как я хочу текст, в '{{type_writing}}' – kikuyu1

Вот ваше решение, вы должны правильно определить ваши нг-варианты

скрипку: 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>

источник

2016-02-08 21:17:55

Как получить выбранную опцию в AngularJs

ответ

Смежные вопросы