-1

How do I display an option in a paragraph

when a user selects one of the options?

Here is what I have so far:

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

Basically, how would I get it to display a user's choice in a <p>? And how do I keep it there?

If statements, switches, append? I've been stuck on how to do this

Controller:

.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;
      });
    }
  };
});
Python_Is_Great
  • 889
  • 1
  • 6
  • 8

1 Answers1

0

You simply bind it to a model using the binding expression {{ }}.

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

This is one way binding, if you need two way binding, then you can use ng-model to bind it.

I did a simple example, I managed to get it to bind.

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

}());
TheLazyChap
  • 1,852
  • 1
  • 19
  • 32
  • @Python_Is_Great give it a go and let us know what problem you have in your question, its very hard to tell if we don't know what error you are getting. – TheLazyChap Jun 28 '15 at 03:29
  • @Python_Is_Great show us your controller file, also what gets shown? blank, binding express {{ some value }} or error? – TheLazyChap Jun 28 '15 at 04:24
  • @Python_Is_Great the bounded value is 1 in this case, cause thats is what I initialised it to (i.e basketball). NOTE: it does have the blank entry at the start which you can refer to here http://stackoverflow.com/questions/12654631/why-does-angularjs-include-an-empty-option-in-select – TheLazyChap Jun 28 '15 at 05:05