0

私は AngularJS を使用するのが本当に初めてなので、目標を達成するための最良の方法が何であるかがよくわかりません。私がやりたいのは、hmtl に type=number の入力タグのグリッドを設定し、値がインクリメントされるたびに新しいオブジェクトがリストに追加されるように設定することです。同様に、デクリメントされると (0 未満になることはありません)、そのタイプのオブジェクトはリストから削除されます。

このコードでは、入力ボックスをインクリメントするたびに、その変更が {{}} によって下部に表示されます。しかし、私が実際に拘束しているものは明確ではありません。ユーザーが入力ボックスをインクリメントするたびに新しい foo1 オブジェクトを作成する方法がわかりません。

これが私のコードです：

var app = angular.module('FooTools', ['ionic'])

app.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });


})

app.controller('fooCtrl', function($scope) {
	//I want to bind foo objects to these lists
    $scope.foo1 = [];
	$scope.foo2 = [];
});
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
	<title></title>

	<link href="lib/ionic/css/ionic.css" rel="stylesheet">
	<link href="css/style.css" rel="stylesheet">

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->

<!-- ionic/angularjs js -->
	<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
	<script src="cordova.js"></script>

    <!-- your app's js -->
	<script src="js/app.js"></script>
	<script src="js/foo.js"></script>
</head>

<body ng-app="FooTools">
	<ion-pane>
		<ion-header-bar class="bar-positive">
			<h1 class="title"><b>Foo Tools</b></h1>
		</ion-header-bar>
		<ion-content>
			<div class="main-div">
				<div ng-controller="fooCtrl"><br>
					<div class="row">
						<div class="col">
							Column 1:
						</div>
						<div class="col">
							Column 2:
						</div>
					</div>
					<div class="row">
						<div class="col">
							<label class="item-input">
								object1:&nbsp;	 <input type="number" ng-model="foo1"><br>
							</label>
						</div>
						<div class="col">
							<label class="item-input">
								object2:&nbsp;	 <input type="number" ng-model="foo2"><br>
							</label>
						</div>
					</div>
					Foo: {{foo1 + " foo1, " + foo2 + " foo2"}}
				</div>
			</div>
		</ion-content>
	</ion-pane>
</body>
</html>

また、これが役立つ場合は、私の foo1 オブジェクトコンストラクターを次に示します。

function unit(value) {
this.value = value;
}

これを行う方法を知っている人、またはこれを達成する方法についてより良いアイデアを持っている人はいますか? (これが違いを生むわけではありませんが、これは Ionic プロジェクトです。)

4

2 に答える 2