Javascript 将图像添加到AngularJS中的列表项

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-

我有一个简单的购物清单,需要能够上传图像到个人清单项目。使用MongoDB和AngularJS

图像应绑定到$scope.list.items,因此将图像添加到列表项(例如面包图片)。如何上载图像并将其绑定为该对象的一部分?基本上,一旦完成,项目列表也将包含图像

用于显示项目的HTML:

<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>&nbsp

                <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>&nbsp<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
      });