Question

我想为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', []);

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

Answer 1

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

此语句表明您已经创建了一个离子2+项目（当前为离子3.x）。这不使用angularjs（v 1.x），而是使用angular 5.x。

如果要启动ionic v1项目，

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

ionic start myApp blank --type=ionic1

或者，如果您需要启动here项目，则需要阅读最新的角度文档ionic v3。

在Ionic Typescript中实现脚本

1 个答案: