Question

我有一个搜索表单。当我点击ng-click按钮时，它会提供一些产品详细信息。一旦我得到了细节，我想隐藏那种形式。

product.html

<form name="search_form">
  <div class="search" flex layout="row" layout-align="start center">
    <md-icon md-font-icon="icon-magnify" class="icon search-icon"></md-icon>
    <input class="search-input" ng-model="vm.form.search" type="text" placeholder="Place your URL here.."  flex>
  </div>
  <md-button class="md-raised md-accent" aria-label="LOG IN" ng-click="vm.submitPost(vm.form);">
     Get Details
  </md-button>
</form>

product.controller.js

(function () {
    'use strict';

    angular
        .module('app.product')
        .controller('ProductController', ProductController);

    /** @ngInject */
    ProductController.$inject = ['$http', '$location'];
    function ProductController($http, $location, Auth, $rootScope) {
        var vm = this;

        vm.submitPost =  function(userData) {
            //console.log(userData);
            $http({
                url: 'http://localhost:7200/api/product-search',
                method: 'POST',
                data: userData
            }).then(function(res) {
                console.log('success');
                vm.Product_Name=res.data.Product_Name;
                vm.Brand=res.data.Brand;
                vm.Color=res.data.Color;
                vm.Price=res.data.Price;
                vm.Rating=res.data.Rating;
                vm.Image=res.data.Image;
            }, function(error) {
                console.log(error);
                alert('Please enter url');
            });
        };
    }
})();

我的表单如下：

在那张照片中我标记了那张照片。当我点击get details按钮时，我想获得产品的详细信息，同时隐藏该表格。

Answer 1

使用ngHide的变量：

在submitPost函数中的promise之后，将变量设置为true：

vm.hideForm = true;

将ngHide与表格中的表格一起使用：

<form ng-hide="vm.hideForm === true">

如何使用ng-click隐藏表单？

1 个答案: