Как связать данные из тега ввода html с объектом javascript, используя AngularJS?

Question

Как связать данные из тега ввода html с объектом javascript, используя AngularJS?

0

Я действительно новичок в использовании AngularJS, поэтому я не совсем уверен, что лучший способ достичь моей цели. То, что я хочу сделать, это иметь сетку входных тегов с номером type = в моем hmtl и установить ее так, чтобы всякий раз, когда значение увеличивается, к списку добавляется новый объект. Аналогично, когда он уменьшается (он не может опускаться ниже 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="/ionic.css" rel="stylesheet">
	<link href="/style.css" rel="stylesheet">

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

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

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

    <!-- your app js -->
	<script src="/app.js"></script>
	<script src="/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;
}

Кто-нибудь знает, как это сделать или лучше понять, как это сделать? (Не то чтобы это имеет значение, но это ионный проект.)

reubonwry 03 июль 2015, в 19:18

Источник

Теги:

javascript

html

ionic-framework

angularjs

2 ответа

0

Я не уверен, что полностью понял, что вы пытаетесь сделать здесь, но попробуйте следующее исправление (на основе того, что я понял до сих пор):

//in your DOM
<label class="item-input">
    object1:     <input type="number" ng-model="data.foo1">
                     <button ng-click="addToList(data.foo1)"> + </button>
                     <button ng-click="removeFromList(data.foo1)"> - </button>
</label>

//in your controller
//initialize data
$scope.data=[{foo1:0, foo2:0}];
//func to add obj to list when the value incremented
$scope.addToList = function (obj){
     $scope.data.foo1 ++;
     $scope.foo1List.push(obj);//add to your foo1 list
}
$scope.removeFromList = function (obj){
     $scope.data.foo1 --;
     // you can use $scope.foo1List.splice to remove from your array list
}

надеюсь это поможет!

ALI MAKEEN 03 июль 2015, в 15:31

Ещё вопросы

Mindastic · Accepted Answer · 2015-07-03T15-52-00.000Z

Как насчет привязки "ng-change" к вводу? Например:

<input type="number" ng-change="checkValues("foo1", fooN1)" ng-model="fooN1">
<input type="number" ng-change="checkValues("foo2", fooN2)" ng-model="fooN2">

И внутри вашего контроллера

$scope.checkValues = function (a, b) {
  if (a in $scope) {
    if ($scope[a].length < b) { // If length is smaller that the number
      $scope[a].push({}); //Adds the new object to the array
    } else {
      //Removes the last element of the array
      $scope[a].pop();
    }
  }
}

Надеюсь это поможет

Да, это похоже на стратегию, которую я ищу. Однако предоставленный вами код, похоже, не работает. Кажется, есть несколько проблем. Во-первых, кажется, что мой список не должен быть заключен в кавычки в HTML. Думаю, это должно выглядеть так: <input type="number" ng-change="checkValues(foo1, fooN1)" ng-model="fooN1"> Во-вторых, когда я делаю это изменение, я не могу попасть внутрь второго оператора if. Я задавался вопросом, было ли это синтаксической проблемой, но даже когда я изменял это на: if ($scope.a.push("object") это не работает. (Выдвижение строки только для начальных целей тестирования).
При дальнейшем рассмотрении выполнение кода никогда не попадает в первый оператор if. Вы знаете, почему это так?