我有一个对象数组,我正在使用我的Angular应用程序中显示ng-repeat.我正在过滤掉使用filter的项目和搜索输入的值.它按预期工作.但是,我有一个"全选"/"取消全选"选项,我只想选择列表中的可见项(符合当前搜索条件的项目).
如果不在我的控制器中执行相同的逻辑(即在我的indexOf每个对象上使用搜索值),我如何判断哪些项目当前被ng-repeat/ filter？
我的看法:
<input type="text" ng-model="searchValue">
<input type="checkbox" ng-model="checkAll" ng-change="toggleAll()">
<tr ng-repeat="item in items | filter:searchValue">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
我的控制器中的一个功能:
$scope.toggleAll() {
for(var i in $scope.items){
// how can I tell if this item is filtered out in the view?
}
}
为简单起见,我在这里大大简化了我的代码示例,因为这个问题不需要更多细节.有没有办法做我正在思考或做的事情我需要再次执行"搜索"？
我正在尝试使用Karma,Jasmine和Webpack测试(使用覆盖率)我的TypeScript应用程序.通过以下内容,我能够成功运行测试,但无法正确生成覆盖.我正在使用karma-remap-coverage(https://github.com/sshev/karma-remap-coverage),看起来很简单.
它看起来好像一些有趣的事情正在发生的事情(和我得到某种覆盖报告),但在这里和那里了一些调整,这些数字彻底改变,我永远不能真正加载sourcemaps.
这是基本设置:
我有一个src包含10个.ts文件的目录.目前只有一个.spec文件具有相应的文件.
该spec文件非常简单,足以证明我可以运行测试:
import ComponentToTest from './componentToTest';
describe('ComponentToTest', () => {
it('should run a test', () => {
expect(1+1).toBe(2);
});
it('should be able to invoke the a method', () => {
spyOn(ComponentToTest, 'foo').and.callThrough();
ComponentToTest.foo('testing foo');
expect(ComponentToTest.foo).toHaveBeenCalled();
});
});
当与我的tsconfig.json文件配对时,这就像一个魅力:
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"noImplicitAny": false,
"sourceMap": true,
"lib": ["es6", "dom"],
"experimentalDecorators": true
},
"exclude": [
"node_modules"
]
}
和 …
我有一个非常简单的Webpack + TypeScript设置，正在尝试导入svgs。我正在使用svg-sprite-loader，如果require()我的svg如下所示，则效果很好：
require('./assets/alert.svg')
-
但是，我更喜欢使用以下内容：
import alert from './assets/alert.svg'
这样，我得到以下错误：
TS2307: Cannot find module './assets/alert.svg'.
我custom.d.ts在项目根目录中有一个文件（阅读此文件后：https : //webpack.js.org/guides/typescript/#importing-other-assets）。看起来像这样：
declare module '*.svg' {
const content: any;
export default content;
}
我的tsconfig样子是：
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": false,
"sourceMap": false,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"lib": ["es6", "dom"]
},
"exclude": [
"**/*.spec.ts"
]
}
最后，我的webpack设置包括：
module: {
rules: [
{
test: /\.ts$/,
use: `awesome-typescript-loader`
},
{
test: /\.html$/,
loader: …我正在尝试使用生活在data.json文件中的JSON对象作为我正在研究的快速原型的数据集.它位于一个my_project/www/data/目录中.我有一个Angular服务,使用该文件中的数据$http,并对其进行一些操作,然后在整个应用程序中使用它.
我正在使用Cordova和Ionic.ionic serve在我的电脑上使用时,浏览器中的一切看起来都很完美.但是,当使用ionic view(http://view.ionic.io/)并在我的iPad上打开应用程序时,我看到:
{"data":null,"status":0,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"url":"../data/items.json","headers":{"Accept":"application/json,test/plain,*/*}},"statusText":""}
作出回应.我认为,如果它是一个相对URL问题,它也不会在浏览器中工作,但事实并非如此.
这是我正在做的事情:
config.xml有这一行:
<access origin="*" subdomains="true"/>
我的服务预先形成了简单的请求:
return $http.get("../data/data.json").then(function (response) {
return response.data;
});
最后,在我的控制器中,我要求服务预先形成请求:
myService.goGetData().then(onComplete, onError);
在我的浏览器中,调用onComplete(),在iPad上调用onError().任何指导？
我正在开发一个使用一些Indexeddb的Cordova应用程序(iOS上有一个垫片).
我正在使用IDBKeyRange具有已定义索引的对象库.这在Chrome浏览器中运行良好,但在Android和iOS上存在一些问题.
我有以下受MDN示例启发的TypeScript :
var transaction = this.db.transaction(objectStoreName, "readonly");
var objectStore = transaction.objectStore(objectStoreName);
var index: any = objectStore.index(indexName);
var request = index.getAll(IDBKeyRange.only(indexValue));
在桌面上的Chrome中运行时,一切都很好.当我在已编译的Android或iOS应用程序中运行相同的代码时,我看到:
TypeError: IDBKeyRange.only is not a function
我注销了该IDBKeyRange对象,它似乎是一个函数本身,但这没有用,因为它在(按预期工作)浏览器中执行相同操作.Chrome注销:
function IDBKeyRange()
我解决这个问题的第一个尝试是更密切地关注MDN的例子并做一些类似的事情:
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
但是同样的行为发生了.有什么建议？
更新:
我在2个不同的Android Galaxy Tab As上尝试了这个.两者都具有相同的型号和Android版本(5.0.2).这适用于一个设备但不适用于另一个设备(wut).相同的代码,相同的数据,相同的构建过程.
随着进一步的挖掘,似乎index.getAll is not a function没有包括任何错误IDBKeyRange.only(indexValue).当index登出,我得到一个IDBIndex对象,没有任何方法.
我有一个私有的 Gemfury 注册表，我要将 npm 包发布到它。
我想在我的包中添加分发标签（如下所述：https : //docs.npmjs.com/cli/dist-tag）。
我的 npm 配置注册表设置为代理，允许我从我的私有注册表和公共 npm 注册表进行安装。我也可以正确发布到我的私人注册表。
当我运行npm view我的私人包时，我能够看到我期望的包的所有信息。
当我尝试使用任何npm dist-tag命令时，我遇到了问题。我只是404 Not Found从 npm得到一个错误。
我跑：
npm dist-tag ls my-private-package-name
并收到：
npm ERR! dist-tag ls Couldn't get dist-tag data for my-private-package-name
npm ERR! Darwin 16.4.0
npm ERR! argv "/Users/me/.nvm/versions/node/v4.2.6/bin/node" "/Users/me/.nvm/versions/node/v4.2.6/bin/npm" "dist-tag" "ls" "my-private-package-name"
npm ERR! node v4.2.6
npm ERR! npm v2.14.12
npm ERR! code E404
npm ERR! 404 Not Found : MyPriVaTeGemfuryToKEn
npm ERR! 404
npm ERR! …我有一个相当简单的webpack设置，但有些曲折。我可以通过几种不同的方式来创建预期的行为，但是我想知道是否有更好的方法（对于Webpack，我还是很新的）。
我有一个基本的TypeScript / Scss应用程序，所有src文件都存在于src目录中。我还有一个组件库捆绑包，它是通过一个单独的构建过程（通过Node触发）动态生成的。该捆绑包也结束于src目录中（它包含一些sass变量和属于的其他一些资产src）。这是src/custom-library-bundle。我当前的Webpack设置通过将相应的捆绑文件移动到public（dist）目录CopyWebpackPlugin。我的webpack开发服务器监视更改并按预期重新加载。这一切都很漂亮。
现在为扭曲。我已经建立了一个自定义监视程序，该监视程序存在于其他地方，以监视自定义组件库包的更改。当在那里发生更改时，它将触发上述自定义构建过程。（如预期的那样）这将修改src/custom-library-bundle目录，并在填充捆绑软件时启动多个监视/重新加载。技术上可行吗？这是预期的行为，但是理想情况下，我可以告诉它等待定制安装工作“完成”，然后才触发编译/重新加载。
ew 这不是一个容易解释的人。这是一个webpack配置，希望（希望）有助于阐明：
devServer: {
contentBase: path.join(__dirname, 'public'),
port: 9000,
host: '127.0.0.1',
after: (app, server) => {
new MyCustomWatcherForOtherThings().watch(() => {
// invoked after the src/custom-library-bundle is done doing its thing (each time)
// now that I know it's done, I want to trigger the normal compilation/reload
})
},
watchOptions: {
ignored: [
/node_modules/
// I've been experimenting …我有一个模块正在导入另一个模块以使用其中声明的组件。在下面的示例中，ModuleAComponentC尝试使用ModuleBComponentA. 似乎ModuleA需要导入ModuleB才能使用它，因此ModuleB需要导出ModuleBComponentA. 看起来很简单，但以下对我不起作用。
我得到 Can't bind to 'name' since it isn't a known property of 'module-b-component-a'
src/a/moduleA.module.tsimport { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CommonModule } from "@angular/common"
import { ModuleAComponentC } from './c.component'
import { ModuleAComponentD } from './d.component'
import { ModuleB } from './../b/b.module'
@NgModule({
imports: [
BrowserModule,
CommonModule,
ModuleB
],
declarations: [
ModuleAComponentC,
ModuleAComponentD
]
})
export class …