时间戳

首页 > 解决方案 > 在 Ionic Typescript 中实现脚本

angularjs - 在 Ionic Typescript 中实现脚本

问题描述

我想为我的 Ionic 应用程序实现动态添加的按钮。我发现我可以使用下面的代码来完成这个任务。

我将代码的第一部分放入 html 正文中的 home.html 文件中。

<div ng-controller="MyCtrl">
<div class="list list-inset">
<div class="item-input" ng-repeat="input in inputs">
  <label class="item-input-wrapper">
        <input type="text" placeholder="Type something" ng-model="input.value" />
    </label>
  <button class="button button-small button-balanced" ng-if="$index == inputs.length - 1" ng-click="addInput()">
        <i class="icon ion-plus"></i>
    </button>
  <button class="button button-small button-assertive" ng-if="$index != inputs.length - 1" ng-click="removeInput($index)">
        <i class="icon ion-minus"></i>
    </button>
</div>
</div>

我放置到 home.ts 文件中的代码的第二部分。我试图将此代码放在主类中。

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

app.controller("MyCtrl", function($scope) {
$scope.inputs = [{
value: null
}];

$scope.addInput = function() {
console.log("new input");
$scope.inputs.push({
  value: null
});
}

$scope.removeInput = function(index) {
$scope.inputs.splice(index, 1);
}
});

不幸的是，我无法定义变量：

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

因为我收到“打字稿错误”。不幸的是，我不知道如何解决这个问题。我希望你们中的一些人会知道一个解决方案并可以帮助我解决这个问题。

标签： angularjstypescriptionic-framework

解决方案

我放在 home.ts 文件中的代码的第二部分

该声明表明您已经创建了一个 ionic 2+ 项目（当前为 Ionic 3.x）。这不使用 angularjs (v 1.x)，而是使用 angular 5.x。

如果你想启动一个ionic v1项目，

你需要type在你的启动命令中设置。

ionic start myApp blank --type=ionic1

或者，如果您需要启动ionic v3项目，您需要在此处阅读最新的 Angular 文档。

推荐阅读