Допомога у програмуванні, відповіді на питання / Javascript / Як відобразити вибір користувача у angularjs? - javascript, html, angularjs

Як відобразити обраний користувачем вибір в angularjs? - javascript, html, angularjs

Як відобразити параметр у абзаці

коли користувач вибирає один із варіантів?

Ось що я маю до цих пір:

<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>? І як мені там тримати?

Якщо оператори, перемикачі, додавання? Я застряг у тому, як це зробити

Контролер:

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

Відповіді:

0 для відповіді № 1

Ви просто bind це до a 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>

(function() {
"use strict";

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

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

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

}());