This is my script File..
这是我的脚本文件..
app.controller('userController', function PostController($scope, userFactory) {
$scope.users = [];
$scope.user = { items : [] , attributes : [] };
$scope.editMode = false;
$scope.addItem = function (index) {
$scope.user.items.push({
Name: $scope.newItemName,
Value: $scope.newItemValue
});
};
$scope.deleteItem = function (index) {
$scope.user.items.splice(index, 1);
};
}
This is my HTML file
这是我的HTML文件
<div class="modal-body">
<form class="form-horizontal" role="form" name="adduserform">
<div class="form-group">
<label for="title" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" data-ng-model="user.Name" class="form-control" id="title" placeholder="Your Name" required title="Enter your name" />
</div>
</div>
<div class="form-group">
<label for="title" class="col-sm-2 control-label">Address</label>
<div class="col-sm-10">
<input type="text" data-ng-model="user.Address" class="form-control" id="title" placeholder="Your Address" required title="Enter your address" />
</div>
</div>
<div class="form-group">
<label for="title" class="col-sm-2 control-label">ContactNo</label>
<div class="col-sm-10">
<input type="text" data-ng-model="user.ContactNo" class="form-control" id="title" placeholder="Your ContactNo" required title="Enter your contactno" />
</div>
</div>
<div class="form-group">
<ul class="nav" class="col-sm-2" >
<label for="title" class="col-sm-2 control-label">Variations</label>
<div class="col-sm-10">
<input type="text" value="ItemName" class="form-control" id="title" ng-model="newItemName" required placeholder="Name of new item...">
<input type="text" value="ItemName" class="form-control" id="title" ng-model="newItemValue" required placeholder="Value of new item...">
</div>
<div class="col-sm-offset-3">
<button ng-click="addItem()" class="btn btn-primary" >Add Me</button>
<table class="table table-hover">
<tr data-ng-repeat="item in user.items">
<td>
<p>{{item.Name}}</p>
</td>
<td>
<p>{{item.Value}}</p>
</td>
<td>
<a ng-click="deleteItem($index)" class="delete-Item">x</a>
</td>
</tr>
</table>
</div>
</ul>
</div>
My doubt is that whenever I click addItem it will be stored as Name : "xxx", Value: "yyy", but i want it to be stored as xxx : yyy. Is there a way to do that. Im new to angular js. Please help me. Thank you
我怀疑的是,每当我点击addItem时,它将被存储为Name:“xxx”,Value:“yyy”,但我希望它存储为xxx:yyy。有没有办法做到这一点。我是角度js的新手。请帮我。谢谢
2 个解决方案
#1
1
Try using this code in your addItem
method:
尝试在addItem方法中使用此代码:
$scope.addItem = function (index) {
var newItem = {};
newItem[$scope.newItemName] = $scope.newItemValue;
$scope.user.items.push(newItem);
};
In this code you first create an object for new item, and then create the property from newItemName
and assign it a value from field newItemValue
. Then you push this to an array.
在此代码中,首先为新项创建一个对象,然后从newItemName创建该属性,并从字段newItemValue为其赋值。然后你把它推到一个数组。
One issue with this approach is that your bindings like <p>{{item.Name}}</p>
will not work, because there is no property called Name
anymore. I don't know why you want to store the data in the format you described, but in order to make the old bindings work you could also use old properties as well:
这种方法的一个问题是像
{{item.Name}} 这样的绑定不起作用,因为不再有名为Name的属性。我不知道你为什么要以你描述的格式存储数据,但是为了使旧的绑定工作,你也可以使用旧的属性:
$scope.addItem = function (index) {
var newItem = {Name: $scope.newItemName, Value: $scope.newItemValue };
newItem[$scope.newItemName] = $scope.newItemValue;
$scope.user.items.push(newItem);
};
#2
0
Use a map instead of a list for the items:
使用地图而不是项目列表:
$scope.user = { items : {} , attributes : [] };
$scope.user.items[$scope.newItemName] = $scope.newItemValue;
#1
1
Try using this code in your addItem
method:
尝试在addItem方法中使用此代码:
$scope.addItem = function (index) {
var newItem = {};
newItem[$scope.newItemName] = $scope.newItemValue;
$scope.user.items.push(newItem);
};
In this code you first create an object for new item, and then create the property from newItemName
and assign it a value from field newItemValue
. Then you push this to an array.
在此代码中,首先为新项创建一个对象,然后从newItemName创建该属性,并从字段newItemValue为其赋值。然后你把它推到一个数组。
One issue with this approach is that your bindings like <p>{{item.Name}}</p>
will not work, because there is no property called Name
anymore. I don't know why you want to store the data in the format you described, but in order to make the old bindings work you could also use old properties as well:
这种方法的一个问题是像
{{item.Name}} 这样的绑定不起作用,因为不再有名为Name的属性。我不知道你为什么要以你描述的格式存储数据,但是为了使旧的绑定工作,你也可以使用旧的属性:
$scope.addItem = function (index) {
var newItem = {Name: $scope.newItemName, Value: $scope.newItemValue };
newItem[$scope.newItemName] = $scope.newItemValue;
$scope.user.items.push(newItem);
};
#2
0
Use a map instead of a list for the items:
使用地图而不是项目列表:
$scope.user = { items : {} , attributes : [] };
$scope.user.items[$scope.newItemName] = $scope.newItemValue;