Javascript 将图像添加到AngularJS中的列表项
我有一个简单的购物清单,需要能够上传图像到个人清单项目。使用MongoDB和AngularJS 图像应绑定到$scope.list.items,因此将图像添加到列表项(例如面包图片)。如何上载图像并将其绑定为该对象的一部分?基本上,一旦完成,项目列表也将包含图像 用于显示项目的HTML:Javascript 将图像添加到AngularJS中的列表项,javascript,angularjs,mongodb,Javascript,Angularjs,Mongodb,我有一个简单的购物清单,需要能够上传图像到个人清单项目。使用MongoDB和AngularJS 图像应绑定到$scope.list.items,因此将图像添加到列表项(例如面包图片)。如何上载图像并将其绑定为该对象的一部分?基本上,一旦完成,项目列表也将包含图像 用于显示项目的HTML: <ul class="list-group"> <li style="color:{{list.color}}" class="list-group-item" ng-
<ul class="list-group">
<li style="color:{{list.color}}" class="list-group-item" ng-repeat="item in list.items | orderBy:propertyName:reverse | filter: search ">
<input type="checkbox" ng-model="item.isChecked" ng-click="editItem()">
{{item.name}} - {{item.priority}}
<i class="fa fa-trash-o" aria-hidden="true" ng-click="removeItem(item)"></i> 
<i class="fa fa-pencil" aria-hidden="true" href ng-click="showEdit = !showEdit" ng-show="!showEdit"></i><br>
<small class="form-text text-muted">Note: {{item.note}}</small>
<div ng-show = "showEdit">
<h4>Edit {{item.name}}</h4>
<form ng-submit="editItem()">
<input class="form-control" type="text" name="name" id="name" ng-model="item.name" maxlength="25" required>
<select class="form-control" name="priority" id="priority" ng-model="item.priority" required>
<option value="">Priority</option>
<option value="High">High</option>
<option value="Low">Low</option>
</select>
<input type="text" class="form-control" name="note" id="note" ng-model="item.note" maxlength="255" value= " ">
<button class="btn btn-default" type="submit" ng-click="showEdit = !showEdit">Update</button>
</form>
</div>
<br>
</li>
</ul>
-
{{item.name}-{{item.priority}
 
注:{{item.Note}
编辑{{item.name}
优先
高
低
更新
以下是用于添加项目的HTML:
<button class="btn btn-default btn-custom" href ng-click="showAddItem = !showAddItem" ng-show="!showAddItem">Add Item</button>
<div ng-show="showAddItem" class="add-item">
<h4>Add Item</h4>
<form ng-submit="addItem()">
<input class="form-control" type="text" name="name" id="name" ng-model="newItem.name" placeholder="Item" maxlength="25" required>
<select class="form-control" name="priority" id="priority" ng-model="newItem.priority" required>
<option value="">Priority</option>
<option value="High">High</option>
<option value="Low">Low</option>
</select>
<input type="text" class="form-control" name="note" id="note" ng-model="newItem.note" placeholder="Note" maxlength="255" value= " ">
<button class="btn btn-default btn-add" type="submit">Add</button> <span class="close-box" ng-click="showAddItem = !showAddItem"><u>close</u></span>
</form>
<!-- <button class="btn btn-default btn-lg btn-custom" href="">Add Item</button> -->
</div><br><br>
<a ng-href="#/home"><button class="btn btn-default btn-lg btn-home">Save & Return</button></a>
</div>
添加项目
添加项
优先
高
低
添加 close
以及用于添加项目的控制器:
(function () {
'use strict';
var app = angular.module('myApp');
app.controller('ShoppingListController', ['$scope', '$http', '$routeParams', 'API_BASE', '$location', function($scope, $http, $routeParams, API_BASE, $location){
// GET SPECIFIC LIST
$scope.list = [];
var id = $routeParams.id;
$http({
method: 'GET',
url: API_BASE + 'shopping-lists/' + id
}).then(function successCallback(response) {
$scope.list = response.data[0];
}, function errorCallback(response) {
console.log('it did not work');
console.log(response.statusText);
});
// REMOVE LIST
$scope.removeList = function(){
var id = $scope.list.id;
console.log(id);
$http.delete(API_BASE + 'shopping-lists/' + id)
.success(function (data, status, headers, config) {
console.log('you deleted :' + $scope.list);
})
.error(function (data, status, header, config) {
});
$location.path('/home');
};
// RANDOM ID
function makeid()
{
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for( var i=0; i < 20; i++ ){
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
text += Date.now();
return text;
}
// ADD ITEM
$scope.addItem = function(){
var created = new Date();
var newID = makeid();
if($scope.list.hasOwnProperty('items') === false){
$scope.list.items = [];
}
$scope.list.items.push({
name : $scope.newItem.name,
priority : $scope.newItem.priority,
note: $scope.newItem.note,
isChecked: false,
listId: $scope.list.id,
created: created,
id: newID
});
// console.log($scope.list.items);
$http.put(API_BASE + 'shopping-lists/', $scope.list)
.success(function (data, status, headers, config) {
})
.error(function (data, status, header, config) {
});
// Reset input fields after submit
$scope.newItem = {
name: "",
priority: "",
note: ""
};
(函数(){
"严格使用",;
var-app=angular.module('myApp');
app.controller('ShoppingListController',['$scope','http','$routeParams','API_BASE','$location',函数($scope,$http,$routeParams,API_BASE,$location){
//获取特定列表
$scope.list=[];
变量id=$routeParams.id;
$http({
方法:“GET”,
url:API_BASE+“购物清单/”+id
}).then(函数成功回调(响应){
$scope.list=response.data[0];
},函数errorCallback(响应){
log(“它不工作”);
console.log(response.statusText);
});
//删除列表
$scope.removeList=函数(){
var id=$scope.list.id;
console.log(id);
$http.delete(API_BASE+'shopping list/'+id)
.success(函数(数据、状态、标题、配置){
console.log('您删除了:'+$scope.list);
})
.错误(功能(数据、状态、标题、配置){
});
$location.path('/home');
};
//随机ID
函数makeid()
{
var text=“”;
var-mablue=“ABCDEFGHIJKLMNOPQRSTUVXYZABCDFGHIJKLMNOPQRSTUVXYZ0123456789”;
对于(变量i=0;i<20;i++){
text+=可能的.charAt(Math.floor(Math.random()*可能的.length));
}
text+=Date.now();
返回文本;
}
//添加项
$scope.addItem=函数(){
var created=新日期();
var newID=makeid();
if($scope.list.hasOwnProperty('items')==false){
$scope.list.items=[];
}
$scope.list.items.push({
名称:$scope.newItem.name,
优先级:$scope.newItem.priority,
注:$scope.newItem.note,
检查:错误,
listId:$scope.list.id,
创建:创建,
id:newID
});
//log($scope.list.items);
$http.put(API_BASE+‘shopping list/’,$scope.list)
.success(函数(数据、状态、标题、配置){
})
.错误(功能(数据、状态、标题、配置){
});
//提交后重置输入字段
$scope.newItem={
姓名:“,
优先权:“,
注:“”
};
我修改了您的代码,将图像添加到列表中,然后更改列表项显示以检查属性:
<input type="checkbox" ng-model="item.isChecked" ng-click="editItem()" ng-show="item.hasOwnProperty('isChecked')">
<img ng-show="item.hasOwnProperty('imageSrc')" src="{{ item.imageSrc }}" />
.这是一种方法,但你可以用不同的方法
样品
“严格使用”;
var-app=angular.module('myApp',['ngRoute']);
应用常数('API_BASE','/API');
app.config(['$routeProvider',函数($routeProvider){}]);
app.controller('ShoppingListController',['$scope','http','$routeParams','API_BASE','$location',函数($scope,$http,$routeParams,API_BASE,$location){
//获取特定列表
$scope.list={items:[]};
$scope.showAddItem=true;
变量id=$routeParams.id;
//因为我们无法访问您的服务器,所以对此进行注释
/*$http({
方法:“GET”,
url:API_BASE+“购物清单/”+id
}).then(函数成功回调(响应){
$scope.list=response.data[0];
},函数errorCallback(响应){
log(“它不工作”);
console.log(response.statusText);
});*/
//删除列表
$scope.removeList=函数(){
var id=$scope.list.id;
console.log(id);
$http.delete(API_BASE+'shopping list/'+id)
.success(函数(数据、状态、标题、配置){
console.log('您删除了:'+$scope.list);
})
.错误(功能(数据、状态、标题、配置){
});
$location.path('/home');
};
//随机ID
函数makeid(){
var text=“”;
var-mablue=“ABCDEFGHIJKLMNOPQRSTUVXYZABCDFGHIJKLMNOPQRSTUVXYZ0123456789”;
对于(变量i=0;i<20;i++){
text+=可能的.charAt(Math.floor(Math.random()*可能的.length));
}
text+=Date.now();
返回文本;
}
//添加项
$scope.addItem=函数(){
var created=新日期();
var newID=makeid();
if($scope.list.hasOwnProperty('items')==false){
$scope.list.items=[];
}
$scope.list.items.push({
名称:$scope.newItem.name,
先前的
$scope.list.items.push({
imageSrc: 'http://lh5.googleusercontent.com/-QErodXkgwBc/AAAAAAAAAAI/AAAAAAAAAWQ/LPUidgUqYHs/photo.jpg?sz=32',
priority: '',
note: 'Evan',
//don't include this property - which will make the ng-show for the checkbox false
//isChecked: true,
created: new Date(),
id: -1
});