Question

我们正在做一个学校项目，其中包括申请比萨饼。显示所有披萨的页面正在从json文件加载披萨。 json文件是通过Go加载的，范围为HTML。但是，由于我想做一个更奇特的产品，所以我认为添加一些有关披萨配料的信息的模态会很好。当打开模态时，范围会停止变化。因此，它只加载第一个披萨的原料，并在所有原料中都显示出来。

这是我的HTML代码：

    <html>
    <head>
        <title>Pizza House - De lijst met pizza's</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="../html/main.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div>
            <img src="../images/pizzahouse.png" height="100px" style="vertical-align:middle"> <span class="title">Pizza House - Voor de lekkerste pizza's</span>
        </div>
        <div class="row">
        <h1>De lijst met pizza's</h1>
            {{range .}}
                <div class="col-sm-3">
                    <img src="{{.Image}}"/>
                    <p>{{.Name}}<span>{{.Price | printf "%.2f"}}</span></p>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#informatie">
                        i
                    </button>

                    <div class="modal fade" id="informatie">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h3>Titel</h3>
                                </div>
                                <div class="modal-body">
                                    <p><span>{{.Ingredienten}}</p>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">terug</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {{end}}
            <div class="col-sm-3">
                <img src="../images/custompizza.png"/>
                <a href="../view/custompizza">Custom pizza</a>
            </div>
        </div>
    </body>
</html>

这是影响它的前进部分：

const (
    CUSTOMERFILE = "./data/customers.json"
    PIZZAFILE    = "./data/pizzas.json"
    ORDERFILE    = "./data/orders.json"
    INGREDIENTFILE    = "./data/ingredients.json"
)

func loadData(f string, vv interface{}) error {
    raw, err := ioutil.ReadFile(f)
    if err != nil {
        return err
    }
    err = json.Unmarshal(raw, &vv)
    if err != nil {
        return err
    }
    return nil
}
func GetPizza(name string) (Pizza, error) {
    pp, _ := LoadPizzas()
    for _, p := range pp {
        if p.Name == name {
            return p, nil
        }
    }
    return Pizza{}, errors.New("pizza not found")
}

func LoadPizzas() ([]Pizza, error) {
    var pp []Pizza
    err := loadData(PIZZAFILE, &pp)

    return pp, err
}

这是它用作参考的部分类型文件：

type Pizza struct {
    Name         string  `json:"name"`
    Price        float32 `json:"price"`
    Image        string  `json:"image"`
    Ingredienten string  `json:"ingredienten"`
}

使用模式会导致我的“范围”重置

0 个答案: