我的表单中有两个必填字段。我希望星号颜色应该是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) 我正在使用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)
我试图做一个简单的例子,每次用户点击按钮时输入字段和按钮字段.
当单击与输入字段一起出现的新按钮时,如何获取输入字段的文本?
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实现这一目标?
你能告诉我如何在图像中显示下拉.我在这里使用离子框架我正在使用下拉列表
这是我的代码
我希望像展示图片一样制作图片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
我正在尝试制作一个我有一个复选框列表的演示.我能够使用ng-repeat显示列表.
如果用户点击一个复选框(仅选中一个复选框),我需要的是.仅显示一列(100%)宽度.用户选中两列时,它显示两列宽度相等(50%).如果用户选中三列列,它显示三个相等宽度的列.如同用户选中四个复选框,它显示四个相等宽度的列..最初选中一些复选框(选中:true)..
这是我的代码 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
我收到此错误 无法读取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) 你能告诉我如何检查打字稿+ 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)
它应该给true和false
https://stackblitz.com/edit/angular-jfargi?file=src/app/app.component.ts
我试图使用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
我正在尝试添加的单元测试用例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) 我有一个项目列表(示例名称)。我正在尝试在列表中显示所选项目。.Selected items 有一个selected类,它将为该元素添加一个边框。
.selected {
border: 1px solid blue;
}
Run Code Online (Sandbox Code Playgroud)
selected Item 用一个变量决定const selectedItem = 1;它1是否会选择seconditem 。如果const selectedItem = 0;它会选择第一个元素。
问题陈述
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 ×5
angularjs ×4
angular ×3
reactjs ×3
jasmine ×2
material-ui ×2
react-redux ×2
css3 ×1
jss ×1
typescript ×1