AngularJS Как можно изменить все значения переключателей на false, если выбрано значение true? - PullRequest
Новая
       1

AngularJS Как можно изменить все значения переключателей на false, если выбрано значение true?

0 голосов
/ 03 июня 2018

Я извлекаю из базы данных отдельные строковые значения true / false.Пример, который я привожу, предназначен только для иллюстрации того, что я на самом деле получаю из базы данных, представляющей собой строковое значение true или false. Я не могу это изменить.

Я хотел бы сделать следующее.одна кнопка-переключатель отображает их значение как выбранное, если оно истинно, и не выбрано, если оно ложно.

Этот бит отлично работает в моем ответе ниже, однако, когда пользователь выбирает другую кнопку, я хотел бы сделать это значение "истинным".'и установите все остальные как' ложные '.

Я пробовал все виды способов, включая ng-check, но это не работает с ng-моделью.Я нахожу радио кнопки очень запутанными в angularJS, пожалуйста, кто-нибудь может помочь мне понять, что я должен делать?Спасибо 

    <!doctype html>
<html ng-app="sample" >
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Test</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="app/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="app/css/style.css">
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="app/bootstrap/js/bootstrap.min.js"></script>
    <script src="node_modules/angular/angular.js"></script>
    <script>
        var MyApp = angular.module('sample', []);

        MyApp.controller('MainCtrl', function($scope) {

            $scope.red = 'true';
            $scope.yellow = 'false';
            $scope.blue = 'false';
            $scope.green = 'false';
            $scope.orange = 'false';
            $scope.purple = 'false';
            $scope.black = 'false';
            $scope.pink = 'false';
            $scope.white = 'false';

        });     
    </script>  
</head>

<body ng-controller="MainCtrl">
    <div class="container" ><!-- ng-repeat="x in alien.colours" -->

        <h3>What colour alien are you?</h3>

        <input type="radio" name="AliCol" ng-value="'true'" ng-model="red" />
        <label>Red</label>&nbsp; Value is {{red}}<br>

        <input type="radio" name="AliCol" ng-value="'true'" ng-model="yellow" />
        <label>Yellow</label>&nbsp; Value is {{yellow}}<br>

        <input type="radio" name="AliCol" ng-value="'true'" ng-model="blue" />
        <label>Blue</label>&nbsp; Value is {{blue}}<br>

        <input type="radio" name="AliCol" ng-value="'true'" ng-model="green" />
        <label>Green</label>&nbsp; Value is {{green}}<br>

        <input type="radio" name="AliCol" ng-value="'true'" ng-model="orange" />
        <label>Orange</label>&nbsp; Value is {{orange}}<br>

        <input type="radio" name="AliCol" ng-value="'true'" ng-model="purple" />
        <label>Purple</label>&nbsp; Value is {{purple}}<br>

        <input type="radio" name="AliCol" ng-value="'true'" ng-model="black" />
        <label>Black</label>&nbsp; Value is {{black}}<br>

        <input type="radio" name="AliCol" ng-value="'true'" ng-model="pink" />
        <label>Pink</label>&nbsp; Value is {{pink}}<br>

        <input type="radio" name="AliCol" ng-value="'true'" ng-model="white" />
        <label>White</label>&nbsp; Value is {{white}}<br>
    </div>
</body>

</html>

Ниже показано, что происходит, когда вы выбираете другую кнопку, значения обновляются до кнопки «истина», но не могут быть установлены на «ложь»

example

Ответы [ 2 ]

0 голосов
/ 03 июня 2018

Один из способов сделать это (очень простой, который может быть значительно улучшен!) - использовать массив объектов, чтобы выполнить работу за вас.

Fiddle: https://jsfiddle.net/t3t6kueL/

В вашем Javascript вы можете сделать это: 

  var MyApp = angular.module('sample', []);

  MyApp.controller('MainCtrl', function($scope) {

    $scope.colors = [{
        name: 'Red', // name => For presentation
        value: 'false' // value => For toggling the group's values
      },
      {
        name: 'Yellow',
        value: 'false'
      },
      {
        name: 'Blue',
        value: 'false'
      },
      {
        name: 'Green',
        value: 'false'
      },
      {
        name: 'Orange',
        value: 'false'
      },
      {
        name: 'Purple',
        value: 'false'
      },
      {
        name: 'Black',
        value: 'false'
      },
      {
        name: 'Pink',
        value: 'false'
      },
      {
        name: 'White',
        value: 'false'
      },
    ]

    // Expose a method to change the group's values
    $scope.selectColor = function(selectedColorName) {
      // Loop through all of the colors
      $scope.colors.forEach(function(color) {
        // If this is what's being set, then set this to true
        // Note: If there are two different objects, with the same name, you will end up with 2 true values here... 
        if (color.name === selectedColorName) {
          color.value = 'true';
        // For all the others, set it to false
        } else {
          color.value = 'false';
        }
      });
    }
  });

Это позволит вам переместить логику и обработать то, что представитькод приложения, делающий ваш HTML немного скуднее, например: 

<div class="container">

  <h3>What colour alien are you?</h3>

  <div ng-repeat="color in colors">
    <input type="radio" name="AliCol" ng-click="selectColor(color.name)" />
    <label>{{color.name}}</label>&nbsp; Value is {{color.value}}<br>
  </div>

</div>

0 голосов
/ 03 июня 2018

Используйте одно значение для представления выбора пользователя.См. Фрагмент кода ниже для рабочего примера, и см. Документы для получения дополнительной информации. 

var MyApp = angular.module("sample", [])

MyApp.controller("MainCtrl", function($scope) {
  $scope.alienColor = "blue" // set the initial value here
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.min.js"></script>
<div ng-app="sample" ng-controller="MainCtrl">
  <div class="container">
    <!-- ng-repeat="x in alien.colours" -->

    <h3>What colour alien are you?</h3>

    <input type="radio" name="AliCol" value="red" ng-model="alienColor" />
    <label>Red</label>&nbsp; Value is {{red}}
    <br>

    <input type="radio" name="AliCol" value="yellow" ng-model="alienColor" />
    <label>Yellow</label>&nbsp; Value is {{yellow}}
    <br>

    <input type="radio" name="AliCol" value="blue" ng-model="alienColor" />
    <label>Blue</label>&nbsp; Value is {{blue}}
    <br>

    <input type="radio" name="AliCol" value="green" ng-model="alienColor" />
    <label>Green</label>&nbsp; Value is {{green}}
    <br>

    <input type="radio" name="AliCol" value="orange" ng-model="alienColor" />
    <label>Orange</label>&nbsp; Value is {{orange}}
    <br>

    <input type="radio" name="AliCol" value="purple" ng-model="alienColor" />
    <label>Purple</label>&nbsp; Value is {{purple}}
    <br>

    <input type="radio" name="AliCol" value="black" ng-model="alienColor" />
    <label>Black</label>&nbsp; Value is {{black}}
    <br>

    <input type="radio" name="AliCol" value="pink" ng-model="alienColor" />
    <label>Pink</label>&nbsp; Value is {{pink}}
    <br>

    <input type="radio" name="AliCol" value="white" ng-model="alienColor" />
    <label>White</label>&nbsp; Value is {{white}}
    <br>
  </div>

  {{ alienColor }}
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...