绑定单选按钮与angularjs和JavaScript

时间:2016-10-13 11:32:15

标签: javascript html angularjs data-binding

我试图在""中的总排水量中显示各个单位的名称。它不应显示" 1"中的总位移,而应显示"总位移(以像素为单位)"而不是"总位移在10"它应显示"总位移,以厘米为单位"等动态,而不会弄乱当前的值和绑定?我只想在那个地方而不是在文本框中更改它。我已经在单选按钮中使用了ng-model和ng-value,如果我改变单选按钮中的ng值,它会搞砸滑块旁边的文本框和底部的文本框,我不想要那。有没有办法实现这个目标?



"use strict";
var app = angular.module('myApp', []);
var createSlider = function(locID) {
  var elm = document.getElementById(locID);
  elm.innerHTML += "Scale : <input type='range' min=\"1\" max='50' ng-model=\"mLeftModel\">";
  elm.innerHTML += "<input type='text' ng-model=\"mLeftModel\" size='1'>";
};
createSlider("idLeft");
app.controller("exCtrl", function($scope) {
  $scope.mLeftModel = "1";
  $scope.units = [{
    model: "Pixels",
    number: 1
  }, {
    model: "Millimeters",
    number: 5
  }, {
    model: "Centimeters",
    number: 10
  }, {
    model: "Meters",
    number: 50
  }];
});
&#13;
<div ng-app="myApp" ng-controller="exCtrl">
  <input name='rad2' type="radio" ng-model="mLeftModel" ng-value="1">Pixels
  <input name='rad2' type="radio" ng-model="mLeftModel" ng-value="5">Millimeters
  <input name='rad2' type="radio" ng-model="mLeftModel" ng-value="10">Centimeters
  <input name='rad2' type="radio" ng-model="mLeftModel" ng-value="50">Meters
  <table>
    <tr>
      <td>
        <div id="idLeft" style="outline: 3px solid"></div>
      </td>
    </tr>
  </table>
  <label>Total displacement in {{mLeftModel}}:
    <input type="text" ng-model="mLeftModel">
  </label>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

使用ng-repeat指令获取多个单选按钮。

<input ng-repeat="unit in units" name='rad2' type="radio" ng-model="mLeftModel" ng-value="unit"> {{unit.model}}

要显示标签使用:

<label>Total displacement in {{mLeftModel.model}}:    {{mLeftModel.number}} </label>

答案 1 :(得分:0)

试试这个, <?php namespace frontend\controllers; use Yii; use yii\base\InvalidParamException; use yii\web\BadRequestHttpException; use yii\web\Controller; use yii\filters\VerbFilter; use yii\filters\AccessControl; use common\models\LoginForm; use frontend\models\PasswordResetRequestForm; use frontend\models\ResetPasswordForm; use frontend\models\SignupForm; use frontend\models\User; use frontend\models\UserSeacrh; use frontend\models\ContactForm; use yii\widgets\ActiveForm; /** * Site controller */ class SiteController extends Controller { /** * @inheritdoc */ public function behaviors() { return [ 'access' => [ 'class' => AccessControl::className(), 'only' => ['logout', 'signup'], 'rules' => [ [ 'actions' => ['signup'], 'allow' => true, 'roles' => ['?'], ], [ 'actions' => ['logout'], 'allow' => true, 'roles' => ['@'], ], ], ], 'verbs' => [ 'class' => VerbFilter::className(), 'actions' => [ 'logout' => ['post'], ], ], ]; } /** * Displays homepage. * * @return mixed */ public function actionIndex() { return $this->render('index'); } /** * Logs in a user. * * @return mixed */ public function actionLogin() { if (!Yii::$app->user->isGuest) { return $this->goHome(); } $model = new LoginForm(); if ($model->load(Yii::$app->request->post()) && $model->login()) { return $this->goBack(); } else { return $this->render('login', [ 'model' => $model, ]); } } /** * Displays contact page. * * @return mixed */ public function actionContact() { $model = new ContactForm(); if ($model->load(Yii::$app->request->post()) && $model->validate()) { if ($model->sendEmail(Yii::$app->params['adminEmail'])) { Yii::$app->session->setFlash('success', 'Thank you for contacting us. We will respond to you as soon as possible.'); } else { Yii::$app->session->setFlash('error', 'There was an error sending email.'); } return $this->refresh(); } else { return $this->render('contact', [ 'model' => $model, ]); } } /** * Displays about page. * * @return mixed */ public function actionAbout() { return $this->render('about'); } /** * Signs user up. * * @return mixed */ public function actionSignup() { $model = new SignupForm(); if ($model->load(Yii::$app->request->post())) { if ($user = $model->signup()) { if (Yii::$app->getUser()->login($user)) { return $this->goHome(); } } } return $this->render('signup', [ 'model' => $model, ]); } public function actionValidation() { $model = new User(); if(Yii::$app->request->isAjax && $model->load(Yii::$app->request->post())) { Yii::$app->response->format = 'json'; return ActiveForm::validate($model); } } /** * Requests password reset. * * @return mixed */ public function actionRequestPasswordReset() { $model = new PasswordResetRequestForm(); if ($model->load(Yii::$app->request->post()) && $model->validate()) { if ($model->sendEmail()) { Yii::$app->session->setFlash('success', 'Check your email for further instructions.'); return $this->goHome(); } else { Yii::$app->session->setFlash('error', 'Sorry, we are unable to reset password for email provided.'); } } return $this->render('requestPasswordResetToken', [ 'model' => $model, ]); } /** * Resets password. * * @param string $token * @return mixed * @throws BadRequestHttpException */ public function actionResetPassword($token) { try { $model = new ResetPasswordForm($token); } catch (InvalidParamException $e) { throw new BadRequestHttpException($e->getMessage()); } if ($model->load(Yii::$app->request->post()) && $model->validate() && $model->resetPassword()) { Yii::$app->session->setFlash('success', 'New password was saved.'); return $this->goHome(); } return $this->render('resetPassword', [ 'model' => $model, ]); } }