Question

在这个基于移动品牌选择的示例中，带有复选框的移动模型一切正常。根据用户品牌选择，移动模型即将推出。

对于htc品牌，当用户点击htc模型时，我会有带图像的模型应该显示图像而不是显示

Htc One X9

欲望820

欲望810S

它应该显示带复选框的图像但是在提交时它应该传递模型名称。任何一个帮助表示赞赏

＆＃13;

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope, $http) {
  $scope.selectedBrands = [];

  $scope.selectBrand = function(selectedphone) {
    // If we deselect the brand
    if ($scope.selectedBrands.indexOf(selectedphone.brandname) === -1) {
      // Deselect all phones of that brand
      angular.forEach($scope.phones, function(phone) {
        if (phone.brandname === selectedphone.brandname) {
          phone.selected = false;
        }
      });
    }
  }

  $scope.checkSelectedphones = function() {
    var modelNames = [];
    var jsonArr = [];
    var subModelArr = [];
    var aletrMsg = '';
    angular.forEach($scope.phones, function(phone) {
      if (phone.selected) {
        modelNames.push(phone);
        var found = jsonArr.some(function(el) {
          if (el.model === phone.brandname) {
            el.subModel.push(phone.modelname);
            return true;
          }
        });

        if (!found) {
          subModelArr.push(phone.modelname);
          jsonArr.push({
            model: phone.brandname,
            brand: 'Nokia',
            subModel: subModelArr,
            city: 'Noida',

          });
          subModelArr = [];
        }

      }

      phone.selected = false;
    });
    console.log(modelNames.length);
    if (modelNames.length == 0) {
      alert(modelNames.length ? aletrMsg : 'No phones selected!');
    } else {
      console.log(jsonArr);
    }

    $scope.selectedBrands = [];
  }

  $scope.phones = [{
    id: "986745",
    brandname: "Nokia",
    modelname: "Lumia 735 TS"
  }, {
    id: "896785",
    brandname: "Nokia",
    modelname: "Nokia Asha 230"
  }, {
    id: "546785",
    brandname: "Nokia",
    modelname: "Lumia 510"
  }, {
    id: "144745",
    brandname: "Samsung",
    modelname: "Galaxy Trend 840"
  }, {
    id: "986980",
    brandname: "Samsung",
    modelname: "Galaxy A5"
  }, {
    id: "586980",
    brandname: "Samsung",
    modelname: "Galaxy Note 4 Duos"
  }, {
    id: "986980",
    brandname: "Samsung",
    modelname: "Galaxy A5"
  }, {
    id: "586980",
    brandname: "Samsung",
    modelname: "Galaxy Note Duos"
  }, {
    id: "232980",
    brandname: "Htc",
    modelname: "Htc One X9",
    image:"http://cdn.bgr.com/2015/03/bgr-htc-one-m9-1.jpg",
  }, {
    id: "456798",
    brandname: "Htc",
    modelname: "Desire M9",
    image:"https://vtcdn.com/sites/default/files/images/2014/6/10/img-1402379949-1.jpg",
  }, {
    id: "656798",
    brandname: "Htc",
    modelname: "Desire 810S",
    image:"https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQINOLh4PEebd7H8F5MM9SGdC14oQAH91I4XqHJZL3LlUg1PKoV",
  }];

});

myApp.filter('unique', function() {
  return function(collection, keyname) {
    var output = [],
      keys = [];

    angular.forEach(collection, function(item) {
      var key = item[keyname];
      if (keys.indexOf(key) === -1) {
        keys.push(key);
        output.push(item);
      }
    });

    return output;
  };
});

＆＃13;

<div ng-controller="MyCtrl">
  <button ng-click="checkSelectedphones()">
    Check selected phones
  </button>

  <div ng-repeat="phone in phones | unique:'brandname'">
    <label>
      <input type="checkbox" ng-true-value="'{{phone.brandname}}'" ng-false-value="''" ng-model="selectedBrands[$index]" ng-change="selectBrand(phone)"> {{phone.brandname}}
    </label>
  </div>

  <br>

  <div ng-repeat="brand in selectedBrands track by $index" ng-if="brand">
    {{brand}}
    <div ng-repeat="phone in phones" ng-if="phone.brandname === brand">
      <label>
        <input type="checkbox" ng-model="phone.selected"> {{phone.modelname}}

      </label>
    </div>
  </div>
</div>

＆＃13;

demo

Answer 1

我根据你的代码制作了一个小提琴。这是链接：https://jsfiddle.net/0Lggc5pn/

只有HTC手机才有图像。所以我所做的就是添加这段代码：

<img ng-if="phone.image" src="{{phone.image}}" width="20" height="20">
<span ng-if="!phone.image">{{phone.modelname}}</span>

因此，如果有可用的图像，将显示图像。否则它将显示型号名称。

我还删除了名为selectBrand（）的方法，这似乎没什么必要。

Answer 2

您可以使用ng-show按不同条件显示图像和文字。

更改

<input type="checkbox" ng-model="phone.selected"> {{phone.modelname}}

到

<input type="checkbox" ng-model="phone.selected"> 
<span ng-show="!phone.image">{{phone.modelname}}</span>
<img ng-src="{{phone.image}}" ng-show="!!phone.image" />

实施例： https://jsfiddle.net/osw35c14/10/

Answer 3

在我的评论之后添加答案。其他两个答案完全有效。我在代码中添加了一行，用于填充phone.image

中的图片网址

<img src="{{phone.image}}" alt="{{phone.modelname}}" height="100px" width="100px"/>

此外，一个可选的div，如果勾选则显示名称。

<div ng-show="phone.selected">
      {{phone.modelname}}
     </div>

这是一个有效的demo

如何根据我在angularjs中的要求显示数据？

3 个答案: