Question

我想在纸张对话框上显示checktext，只有来自checkarray和控制台的vehiclename我想显示checkarray中所有对象的checktext。目前，在纸张对话框中，只有卡车价值出现在点击任何纸张复选框

<template is="dom-repeat" items="{{checkdata}}">
    <paper-checkbox on-tap="checkall" checked="{{item.checked}}">{{item.name}}</paper-checkbox>
</template>

属性：

checkdata: {
    type: Array,
    value: [{
       name: 'Bike',
       no: 1,
    }, {
       name: 'Car',
       no: 2,
    }, {
       name: 'Cycle',
        no: 3,
    }, {
       name: 'Bus',
       no: 4,
    }, {
       name: 'Truck',
       no: 5,
    }],
}

使用Javascript：

checkall: function() {
    var checkvalue = this.checkdata;
    var checktext = [];
    for (i = 0; i < checkvalue.length; i++) {
        var checkarray = {
            vehiclename: checkvalue[i].name,
            vehiclenumber: checkvalue[i].no,
        };
        if (checkvalue[i].checked == true) {
            checktext.push(checkarray);
        }
    }
    this.checkeditem = checkarray.vehiclename;
    console.log(checktext);
}

Answer 1

之前我已回复过这个问题了。现在我无法准确理解你真正想要做的更多，希望这会有所帮助！

＆＃13;

<html>
<head>
  <base href="https://polygit.org/polymer+:master/components/">
  <link href="polymer/polymer.html" rel="import">
  <link rel="import" href="paper-checkbox/paper-checkbox.html">
  <link rel="import" href="paper-button/paper-button.html">
  <link rel="import" href="paper-progress/paper-progress.html">
  <link rel="import" href="paper-dialog/paper-dialog.html"> 
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
</head>
 <body> 
  <my-test>test</my-test>
   
  <dom-module id="my-test">
  <template>
    <style>
      :host {
        display: block;
        height: 100%;
      } 
    
    </style> 
     <div>
    <template is="dom-repeat" items="{{checkdata}}">
        <paper-checkbox checked="{{item.checked}}" on-change='checkedChenged'></paper-checkbox>
        <span>{{item.name}}</span> <br/> <br/> 
    </template>
    <paper-dialog id="dialog">
       <h2>Selected Vehicle: {{vehicle}}</h2>
      <div class="buttons">
          <paper-button dialog-confirm autofocus on-tap='uncheckAll'>Tap me to close</paper-button>
     </div>
    </paper-dialog>
    <paper-button on-tap="checkAll" raised>Check All</paper-button>
    <paper-button on-tap="uncheckAll" raised>Uncheck All</paper-button>
    <paper-button on-tap="togglecheckAll" raised> Toggle Check/Uncheck</paper-button>
</div> 
  </template>
  <script>
    HTMLImports.whenReady(function() {
    class MyTest extends Polymer.Element {
      static get is() { return 'my-test'; }
      static get properties() { return { 
            vehicle:String,
            checkdata:{
                 type: Array,
                value() {return [{name: 'Bike'}, {name: 'Car'}, {name: 'Cycle'}, {name: 'Bus'}, {name: 'Truck'}
        ]}
             }
          }}
      static get observers() {return  [  
        'checkCheckdata(checkdata)']}
                 // set this element's employees property
         constructor() {
                super();    
         }
      
        checkCheckdata(d){
           // console.log('data : ',d)
        }
      
        checkAll() { 
          let checkdata=[];
          this.checkdata.forEach((i,x)=> {
             checkdata.push({"name": i.name, "checked": true});
            
             if (x==this.checkdata.length-1){
               this.set('checkdata', checkdata);
               
            }
          })
          
        }
      
       uncheckAll() {
         let checkdata=[];
          this.checkdata.forEach((i,x)=> {
             checkdata.push({"name": i.name, "checked": false});
            
             if (x==this.checkdata.length-1){
               this.set('checkdata', checkdata);
               
            }
          }) 
       }
      
      
      togglecheckAll() {
          let checkdata=[];
          this.checkdata.forEach((i,x)=> {
             checkdata.push({"name": i.name, "checked": !i.checked});
   
             if (x==this.checkdata.length-1){
               this.set('checkdata', checkdata);
               
            }
          }) 
      }
    checkedChenged(i) {
        this.vehicle= i.model.item.name;
        this.$.dialog.open();
        
        
    }     
 }
customElements.define(MyTest.is, MyTest);
 });
     
</script>
    
</dom-module>
</body>
</html>

＆＃13;

SwipeView's docs（在Codepen）

如何从对象数组中获取特定对象并将其推送到另一个数组

1 个答案: