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 }];

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

我有另一个div，我必须显示选项文本（即是或否（选择一个））。我使用了{{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

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

＆＃13;

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 "";
    }
  }

});

＆＃13;

<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>

＆＃13;

在html中获取ng-option文本

3 个答案: