Question

我对angularjs很新。我想做的只是根据所选的性别（从文本字段中获取值）为用户分配不同的图像。如果性别==男性{ 男性形象。 } 其他{ 女性形象。 }

我只是将文本字段中的文本保存到数组中，

保存代码：

$scope.save = function () {
            var contact = {'name':$scope.name,'phone':$scope.phone,'email':$scope.email,'gender':$scope.gender};
            var arrayOfObject = [];
            if (localStorage.getItem('data') == null || localStorage.getItem('data') == '') {
                arrayOfObject.push(contact);
            }
            else {
                arrayOfObject = JSON.parse(localStorage.getItem('data'));
                arrayOfObject.push(contact);
            }

        localStorage.setItem('data', JSON.stringify(arrayOfObject));
        console.log('array is:',localStorage);

  }

检索代码：

var completeList = [];
    $scope.completeList = myService.getData();

    if($scope.completeList!==null && $scope.completeList!==0){


    for(var i=0; i <$scope.completeList.length; i++)
    {

        $scope.gender = $scope.completeList[i].gender;

        if($scope.gender == "female"){
         $scope.image1= 'images/female.jpg';
        }
        else{
        $scope.image1 = 'images/profile.png';
        }
        console.log($scope.image1);
    }

在html页面

<tr ng-repeat="n in completeList| filter:search">
          <td ng-click="detailView($index)">
             <div><img width="100px" height="50px"  ng-src="{{image1}}" ></div>

但问题是html只是将我最后保存的图像显示在数组中（即如果我将最后一个对象保存为“男性”，则通过替换所有女性图像而不是仅仅显示男性图像，反之亦然.. < / p>

任何人都可以在我出错的地方帮助我。

提前致谢。

Answer 1

从控制器中删除if($scope.gender == "female"){....代码并在HTML模板中尝试此操作

<tr ng-repeat="n in completeList| filter:search">
  <td ng-click="detailView($index)">
     <div ng-init="genderImage = n.gender == "female" ? 'images/female.jpg' : 'images/profile.jpg'">
        <img src="images/female.jpg" ng-src="{{genderImage}}" />
     </div>

Answer 2

$ scope.gender一次只能保存一个值。

在for循环中，您应该执行以下操作：

$scope.completeList[i].gender_image = $scope.completeList[i].gender == "female" ? 'images/female.jpg' : 'images/profile.jpg'

然后在你的模板中：

<tr ng-repeat="user in completeList| filter:search">
  <td ng-click="detailView($index)">
    <div><img width="100px" height="50px"  ng-src="{{user.gender_image}}" ></div>

如何根据angularjs中选定的性别切换图像

2 个答案: