Question

我想将“已选中的值”复选框分隔为＆＃39;，＆＃39;并且＆＃39;＆amp;＆＃39;。最后一个Checked Value包含＆amp;在它之前有其他的＆＃39;，＆＃39;。

//我希望通过＆amp;分隔Checkbox的选中值然后，两个值然后＆＃34;茶＆amp;咖啡＆＃34;，三价值然后＆＃34;茶，咖啡＆amp;卡布奇诺＆＃34 ;.我用angularjs完成了这段代码 //app.js

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


myApp.controller('checkBoxController', function ($scope) {
        $scope.drinks=[{name:'Tea'},
                            {name:'Coffee'},
                            {name:'Cappuccino'}
                            ];



        $scope.selection=[];
        // toggle selection for a given employee by name
        $scope.toggleSelection = function toggleSelection(drinkName) {
        var idx = $scope.selection.indexOf(drinkName);

        // is currently selected
        if (idx > -1) {
          $scope.selection.splice(idx, 1);
        }

         is newly selected
        else {
          $scope.selection.push(drinkName);
        }
      };
}


);

<!--index.html-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Angular Task</title>
</head>
<body ng-app="myApp" ng-controller="checkBoxController" >
<h1>Task 1</h1>
<label>Salutation : </label>

<select ng-model="salutation">
  <option value="Mr">Mr</option>
  <option value="Miss">Miss</option>
</select>
<br /><br />
<label>First Name : </label>

<input type="text" name="fname" ng-model="firstname" id="fname" />
<br /><br />
<label>Last Name :</label>

<input type="text" name="lname" ng-model="lastname" id="lname" />
<br /><br />
<label>Nick Name :</label>

<input type="text" name="nname" id="nname" ng-model="nickname"  />
<br /><br />
<!--<label>Gender :</label>

<input type="radio" name="gender" value="male" />
Male
<input type="radio" name="gender" value="female" />
Female<br /><br />-->
<label>Show :</label>

<input type="radio" ng-model="show" name="sshow" value="flname" />
Full name
<input type="radio" ng-model="show" name="sshow" value="nickname" />
Nick name<br /><br />

<div class="check-box-panel">
        <div ng-repeat="drink in drinks">
            <div class="action-checkbox">
                <input id="{{drink.name}}" type="checkbox" value="{{drink}}" ng-checked="selection.indexOf(drink.name) > -1" ng-click="toggleSelection(drink.name)" />
                <label for="{{drink.name}}"></label>
                {{drink.name}}
            </div>
        </div>
    </div><br /><br />
<div ng-switch="show">
  <h2 ng-switch-when="flname">
    <div ng-switch="salutation">
    <b ng-switch-when="Mr">Mr</b><b ng-switch-when="Miss">Miss</b> {{ firstname +' '+ lastname }} likes <span  ng-repeat="name in selection">{{name+' '}}</span>  </h2>
  <h2 ng-switch-when="nickname">
    <div ng-switch="salutation">
    <b ng-switch-when="Mr">Mr</b><b ng-switch-when="Miss">Miss</b> 
    {{ nickname }} likes <span  ng-repeat="name in selection">{{name+' '}}</span> </h2>
  <h2 ng-switch-default>Fill Up Details </h2>
</div>
</body>
</html>
enter code here

Answer 1

答案取决于您的需求。

jsfiddle上的实例。

angular.module('ExampleApp', [])
  .controller('ExampleOneController', function($scope) {
    $scope.drinks = ["tea", "coffee", "capuccino"];
    $scope.addDrink = function(drink) {
      $scope.drinks.push(drink);
    }
    $scope.getDrinksString = function(){
     return $scope.drinks.slice(0,$scope.drinks.length-1).join(', ') + " & " + $scope.drinks[$scope.drinks.length-1]
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleOneController">
    <h3>
      ExampleOneController
    </h3>
    <form name="ExampleForm" id="ExampleForm">
      <input placeholder="drink" ng-model="drink" />
      <button ng-click="addDrink(drink)">
        Add drink
      </button>
      <div>
        First way - pure JS
        <br>
        <span>{{drinks.slice(0,drinks.length-1).join(', ') + " & " + drinks[drinks.length-1]}}</span>
        <br>
        <span>{{getDrinksString()}}</span>
      </div>
      <div>Second way - angular way
        <br>
        <span ng-repeat="dr in drinks">
      {{dr}}<span ng-if="$index<drinks.length-2">, </span><span ng-if="$index==drinks.length-2"> & </span>
        </span>
      </div>
    </form>
  </div>
</div>

Answer 2

替换下面的行

<span  ng-repeat="name in selection">{{name+' '}}</span>

带

<span  ng-repeat="name in selection"> {{name}}{{$last ? '' : ($index==selection.length-2) ? ', & ' : ',&nbsp;'}}</span>

我希望将“已选中的值”复选框分隔为＆＃39;，＆＃39;并且＆＃39;＆amp;＆＃39;。最后一个Checked Value包含＆amp;在它之前有其他的＆＃39;，＆＃39;

2 个答案: