Question

当用户选择其中一个选项时，如何在段落

中显示选项？

这是我到目前为止所做的：

<select ng-model="model.id" convert-to-number>
  <option value="0">Soccer</option>
  <option value="1">Basketball</option>
  <option value="2">Tennis</option>
  <option value="3">Baseball</option>
 </select>

 <p> Your choice is [user's choice goes here]! </p>

基本上，我如何让它在<p>中显示用户的选择？我该如何保留它？

if语句，开关，追加？我一直坚持如何做到这一点

控制器：

.run(function($rootScope) {
  $rootScope.model = { id: 2 };
})
.directive('convertToNumber', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      ngModel.$parsers.push(function(val) {
        return parseInt(val, 10);
      });
      ngModel.$formatters.push(function(val) {
        return '' + val;
      });
    }
  };
});

Answer 1

您只需使用绑定表达式bind将model改为{{ }}。

<p> Your choice is {{ yourModel }} </p>

这是单向绑定，如果需要双向绑定，则可以使用ng-model绑定它。

我做了一个简单的例子，我设法让它绑定。

<强> HTML

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

<head>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="MainController">
  <select ng-model="model.id" convert-to-number="" selected="selected">
    <option value="0">Soccer</option>
    <option value="1">Basketball</option>
    <option value="2">Tennis</option>
    <option value="3">Baseball</option>
  </select>
  <p> Your choice is {{ model.id }}! </p>
</body>

</html>

<强> JS

(function() {
    "use strict";

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

    app.controller("MainController", ["$scope", MainController]);

    function MainController($scope) {
         $scope.model = {
           id: 1
         };
    }

}());

如何在angularjs中显示用户的选择？

1 个答案: