小编use*_*513的帖子

如何更改必填 * 字段中的星号颜色

我的表单中有两个必填字段。我希望星号颜色应该是red。目前它显示为黑色。我正在使用材料 UI 反应库?这是我的代码 https://codesandbox.io/s/r7lq1jnjl4 文档 https://material-ui.com/demos/text-fields/

<FormControl>
                  <TextField
                    required
                    InputLabelProps={{
                      shrink: true
                    }}
                    id="standard-name"
                    label="Name"
                    margin="normal"
                    helperText="Some important text"
                  />
                </FormControl>
Run Code Online (Sandbox Code Playgroud)

reactjs material-design material-ui react-redux

8
推荐指数
3
解决办法
8212
查看次数

如何在react的Material-UI选择框中设置默认值?

我正在使用material-ui中的选择框

我想显示默认情况下选中的“选择值”选项,但是之后该用户将无法选择此选项。

<FormControl required className={classes.formControl}>
  <InputLabel htmlFor="circle">Circle</InputLabel>
    <Select
      value={circle}
      onChange={event => handleInput(event, "circle")}
      input={<Input name="circle" id="circle" />}
    >
      <MenuItem value="" disabled>
        <em>select the value</em>
      </MenuItem>

      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </Select>
  <FormHelperText>Some important helper text</FormHelperText>
</FormControl>
Run Code Online (Sandbox Code Playgroud)

沙箱上的当前代码:https : //codesandbox.io/s/xoylmlj1qp

我想像这样:https : //jsfiddle.net/wc1mxdto/


更新资料

我将状态更改20为空白字符串

form: {
  searchValue: "",
  circle: '',
  searchCriteria: ""
}
Run Code Online (Sandbox Code Playgroud)

现在预期的输出应该是下拉列表,应该显示“ please select value”,但是目前显示 在此处输入图片说明

reactjs material-design material-ui react-redux jss

7
推荐指数
4
解决办法
2万
查看次数

如何在按钮点击时在angularjs中动态添加输入字段?

我试图做一个简单的例子,每次用户点击按钮时输入字段和按钮字段.

当单击与输入字段一起出现的新按钮时,如何获取输入字段的文本?

http://codepen.io/anon/pen/yNLGzx

var app = angular.module('ionicApp',['ionic']);
app.controller('cntr',function($scope){
     $scope.addfield=function(){
       alert("how to add input field dyanmically")
     }

})
Run Code Online (Sandbox Code Playgroud)

我不知道该怎么做; 在jQuery中我们可以使用append函数,就像这样

$('.addcontend').append('<input \> <button>get input value</button>')
Run Code Online (Sandbox Code Playgroud)

我如何使用angularjs实现这一目标?

javascript angularjs angularjs-directive angularjs-scope

6
推荐指数
1
解决办法
3万
查看次数

如何在离子中制作下拉列表或选择框

你能告诉我如何在图像中显示下拉.我在这里使用离子框架我正在使用下拉列表

这是我的代码

我希望像展示图片一样制作图片http://ionicframework.com/docs/components/#select

我想只下拉如图像所示(左边的默认文本).我想减少文档中下拉列表的宽度(因为它占据了整个宽度).其次我不想显示任何来自drop的文本下

这是我的代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>

<body ng-app="app">
    <ion-pane>
        <ion-header-bar class="bar-stable">
            <h1 class="title">Awesome App</h1>
        </ion-header-bar>
        <ion-content class="padding">
        <div> View</div>
            <div class="list">

                <label class="item item-input item-select">
                    <div class="input-label">
                        Lightsaber
                    </div>
                    <select>
                        <option selected>Default</option>
                        <option >Green</option>
                        <option>Red</option>
                    </select>
                </label>

            </div>
        </ion-content>
    </ion-pane>
</body>

</html>
Run Code Online (Sandbox Code Playgroud)

javascript css3 angularjs angularjs-directive ionic-framework

6
推荐指数
1
解决办法
5万
查看次数

为什么拼接在角度js中不能正常工作

我正在尝试制作一个我有一个复选框列表的演示.我能够使用ng-repeat显示列表.

如果用户点击一个复选框(仅选中一个复选框),我需要的是.仅显示一列(100%)宽度.用户选中两列时,它显示两列宽度相等(50%).如果用户选中三列列,它显示三个相等宽度的列.如同用户选中四个复选框,它显示四个相等宽度的列..最初选中一些复选框(选中:true)..

  • 我的第一步是取消选中已选中的选项 "training 3"..但是在取消选中之后它仍会显示为什么?我已经使用过splice了.方法 ?

这是我的代码 http://codepen.io/anon/pen/adBroe?editors=101

   init();
  function init(){
      for(var i =0;i<self.data.length;i++){
      var obj=self.data[i];
         if(obj.checked)
      {
        self.selectedList.push(obj);
      }
    }
    alert('starting '+self.selectedList.length)
  }

  self.checkBoxClick=function(obj,i){
    if(obj.checked)
      {
        alert('if')
        self.selectedList.push(obj);
      }else
        {
          alert('else'+i);
          self.selectedList.splice(i,1);
        }
    alert(self.selectedList.length);

   }

})
Run Code Online (Sandbox Code Playgroud)

这是我想要展示的

  <div class='container-fluid'>
    <div class='row'>
      <div ng-repeat="i in vm.selectedList" class='col-xs-{{12/vm.selectedList.length}}'>
        {{i.name}}
      </div>
    </div>
  </div>
Run Code Online (Sandbox Code Playgroud)

javascript angularjs angularjs-directive angularjs-scope angular-ui-router

6
推荐指数
1
解决办法
725
查看次数

无法在角度2中读取null的属性'filter'?

我收到此错误 无法读取null的属性'filter'

当我在角度2中应用滤镜时.我的代码是

http://plnkr.co/edit/K46jJsnmHiONuqIsnuzW?p=preview

import {Pipe} from 'angular2/core';

@Pipe({
  name: 'sortByName',
  pure: false,
})
export class SortByNamePipe {

  transform (value, [queryString]) {
    // console.log(value, queryString);
    return value.filter((student)=>new RegExp(queryString).test(student.name))
    // return value;
  }
}
Run Code Online (Sandbox Code Playgroud)

angular2-template angular2-routing angular

6
推荐指数
1
解决办法
1万
查看次数

如何检查打字稿+角度变量的类型?

你能告诉我如何检查打字稿+ angular中变量的typeof吗?

import { Component } from '@angular/core';

interface Abc {
  name : string
}
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 6';
  a:Abc= {
  name:"sss"
  }

  constructor(){
    console.log(typeof this.a)
   // console.log(this.a instanceof Abc) 
  }
}
Run Code Online (Sandbox Code Playgroud)

它应该给truefalse

https://stackblitz.com/edit/angular-jfargi?file=src/app/app.component.ts

typescript angular

6
推荐指数
4
解决办法
3万
查看次数

模块"模板"不可用!在角js?

我试图使用Jasmine测试角度指令.我使用NPM 安装了karma-ng-html2js-preprocessor.然后我使用Bower使用jQuery,但是我收到了这个错误

Connected on socket ndfTI8XJInIU5YJCAAAA with id 49983199
Chrome 47.0.2526 (Mac OS X 10.10.2) http controller test it should be one FAILED
        Error: [$injector:modulerr] Failed to instantiate module templates due to:
        Error: [$injector:nomod] Module 'templates' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
        http://errors.angularjs.org/1.4.8/$injector/nomod?p0=templates
            at /Users/naveenkumar/Documents/ionic_work/tes/bower_components/angular/angular.js:68:12
            at /Users/naveenkumar/Documents/ionic_work/tes/bower_components/angular/angular.js:2005:17
            at ensure (/Users/naveenkumar/Documents/ionic_work/tes/bower_components/angular/angular.js:1929:38)
            at module (/Users/naveenkumar/Documents/ionic_work/tes/bower_components/angular/angular.js:2003:14)
            at /Users/naveenkumar/Documents/ionic_work/tes/bower_components/angular/a
Run Code Online (Sandbox Code Playgroud)

我做了这样的指示 …

jasmine angularjs angularjs-directive angularjs-scope karma-jasmine

5
推荐指数
1
解决办法
2015
查看次数

如何检查按钮是否禁用?

我正在尝试添加的单元测试用例template driven form。在初始阶段和当用户输入全部有效时,如何检查submit按钮被禁用enablefield

这是表格

https://stackblitz.com/edit/angular-a8q2zr?file=src%2Fapp%2Fapp.component.html

单元测试用例

https://stackblitz.com/edit/angular-testing-5m3qwm?file=app%2Fapp.component.spec.ts

import { ComponentFixture, TestBed,async } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement }  from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';


//
describe('AppComponent', () => {
   let fixture ,component,debugElement; 
  beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports:      [ BrowserModule, FormsModule ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

  beforeEach(()=>{
     fixture = TestBed.createComponent(AppComponent);
     component …
Run Code Online (Sandbox Code Playgroud)

javascript jasmine karma-jasmine angular

5
推荐指数
1
解决办法
5038
查看次数

如何在react js中显示所选项目?

我有一个项目列表(示例名称)。我正在尝试在列表中显示所选项目。.Selected items 有一个selected类,它将为该元素添加一个边框。

.selected {
  border: 1px solid blue;
}
Run Code Online (Sandbox Code Playgroud)

selected Item 用一个变量决定const selectedItem = 1;1是否会选择seconditem 。如果const selectedItem = 0;它会选择第一个元素。

问题陈述

  1. 我有className="container"宽度的包装 div 200px。它将包含尽可能多的列表元素。这取决于项目宽度。

示例列表项(参见示例 1 它只显示三个项,因为所有文本都很小。)

const data = [
  { title: "xahsdha" },
  { title: "hello" },
  { title: "hessllo" },
  { title: "hesslssslo" },
  { title: "navveiii" }
];
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明

带有新数据的示例 2:请参阅项目第一个文本很大。它只显示一项。

const data = [
  { title: "xahsdhaadasdasdasdass" },
  { title: "hello" …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs

5
推荐指数
1
解决办法
87
查看次数