在 html 中获取 ng-option 文本

Question

我的代码：

HTML:

<select ng-model="selectedItem" ng-options="item.result as item.name for item in items"></select>

JS:

$scope.items = [{'name': 'Yes', 'result': true },{ 'name': 'No', 'result': false }];

我想在 select 框中显示 Yes 和 No，而当 Yes 或 No 分别为 selected 时，我必须向服务器发送 true 和 false。

我有另一个 div，我必须在其中显示选项文本（即是或否（selected 一个））。我使用了 {{selectedItem.label}} 但它不起作用。请帮忙。

Answer 1

演示

var app = angular.module('todoApp', []);

app.controller("dobController", ["$scope",
  function($scope) {
    
   $scope.items = [{'name': 'Yes', 'result': true },{ 'name': 'No', 'result': false }];
  }
]);

<!DOCTYPE html>
<html ng-app="todoApp">

<head>
  <title>To Do List</title>
  <link href="skeleton.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
  <script src="MainViewController.js"></script>
</head>


<body ng-controller="dobController">
  <select class="form-control" id="selection" ng-model="currentSelected" ng-options="selection.result as selection.name for selection in items"></select>
  <div>
    <h1> Selected one is : {{currentSelected}} </h1>
    </div>
</body>

</html>

Answer 2

使用了 Sajeetharan 的答案并对其进行了更新以满足您的要求。以下是代码：

<!DOCTYPE html>
<html ng-app="todoApp">

<head>
<title>To Do List</title>
<link href="skeleton.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="MainViewController.js"></script>
</head>


<body ng-controller="dobController">
    <select class="form-control" id="selection" ng-model="currentSelected" ng-options="selection.result as selection.name for selection in items"></select>
    <div>
        <h1> Selected one is : {{currentSelected? "Yes": (currentSelected == null)? "":"No"}} </h1>
    </div>
    <script>
        var app = angular.module('todoApp', []);

        app.controller("dobController", ["$scope",
        function($scope) {

            $scope.items = [{'name': 'Yes', 'result': true },{ 'name': 'No', 'result': false }];
        }
        ]);

    </script>
</body>

</html>

Answer 3

使用指令获得显示所选项目名称值的所需结果，但将结果值发送到后端。

var app = angular.module('app', []);

app.controller("myctrl", ["$scope",
  function($scope) {

    $scope.items = [{
      'name': 'Yes',
      'result': true
    }, {
      'name': 'No',
      'result': false
    }];
  }
]);

app.filter('getvalue', function() {

  return function(value, array) {
    if (value !== undefined && value !== null) {
      var selectedOption = array.filter(function(l) {
        if (l.result == value) {
          return l;
        }
      })[0];
      return selectedOption["name"];
    } else {
      return "";
    }
  }

});

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

<body ng-app="app" ng-controller="myctrl">
  <select class="form-control" id="selection" ng-model="currentSelected" ng-options="selection.result as selection.name for selection in items"></select>
  <div>
    Displayed Text : {{currentSelected | getvalue:items}} 
  </div>
  
   <div>
     Value which will be send : {{currentSelected}} 
  </div>
  
   
  
</body>

在 html 中获取 ng-option 文本

Getting ng-option text inside html

html

angularjs

angularjs-ng-options